it-swarm.com.de

Wie erhalte ich den Wert eines Texteingabefeldes mit JavaScript?

Ich arbeite an einer Suche mit JavaScript. Ich würde ein Formular verwenden, aber auf meiner Seite ist etwas anderes durcheinander. Ich habe dieses Eingabetextfeld:

<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>

Und das ist mein JavaScript-Code:

<script type="text/javascript">
  function searchURL(){
    window.location = "http://www.myurl.com/search/" + (input text value);
  }
</script>

Wie bekomme ich den Wert aus dem Textfeld in JavaScript?

708
user979331

Es gibt verschiedene Methoden, um einen Eingabe-Textfeldwert direkt abzurufen (ohne das Eingabeelement in ein Formularelement zu packen):

Methode 1:

document.getElementById('textbox_id').value, um den Wert von .__ zu erhalten. gewünschte Box

Zum Beispieldocument.getElementById("searchTxt").value;

Hinweis: Die Methode 2,3,4 und 6 gibt eine Auflistung von Elementen zurück. Verwenden Sie [Ganzzahl], um das gewünschte Vorkommen zu erhalten. Verwenden Sie für das erste Element [0], für den zweiten Gebrauch 1 , und so weiter ...

Methode 2:

Benutzen document.getElementsByClassName('class_name')[whole_number].value, die eine Live HTMLCollection zurückgibt

Zum Beispieldocument.getElementsByClassName("searchField")[0].value;, wenn dies das erste Textfeld auf Ihrer Seite ist.

Methode 3:

Verwenden Sie document.getElementsByTagName('tag_name')[whole_number].value, das auch eine Live-HTMLCollection zurückgibt

Zum Beispieldocument.getElementsByTagName("input")[0].value;, wenn dies das erste Textfeld auf Ihrer Seite ist.

Methode 4:

document.getElementsByName('name')[whole_number].value, das auch> eine aktive NodeList zurückgibt

Zum Beispieldocument.getElementsByName("searchTxt")[0].value;, wenn dies das erste Textfeld mit dem Namen "Suchtext" auf Ihrer Seite ist.

Methode 5:

Verwenden Sie das leistungsstarke document.querySelector('selector').value, das das Element mit einem CSS-Selektor auswählt

Zum Beispieldocument.querySelector('#searchTxt').value; ausgewählt durch ID 
document.querySelector('.searchField').value; ausgewählt von der Klasse 
document.querySelector('input').value; ausgewählt von tagname 
document.querySelector('[name="searchTxt"]').value; nach Name ausgewählt

Methode 6:

document.querySelectorAll('selector')[whole_number].value verwendet ebenfalls einen CSS-Selektor zum Auswählen von Elementen, gibt jedoch alle Elemente mit diesem Selektor als statische Knotenliste zurück.

Zum Beispieldocument.querySelectorAll('#searchTxt')[0].value; ausgewählt durch ID 
document.querySelectorAll('.searchField')[0].value; ausgewählt von der Klasse 
document.querySelectorAll('input')[0].value; ausgewählt von tagname 
document.querySelectorAll('[name="searchTxt"]')[0].value; nach Name ausgewählt

Unterstützung

Browser          Method1   Method2  Method3  Method4    Method5/6
IE6              Y(Buggy)   N        Y        Y(Buggy)   N
IE7              Y(Buggy)   N        Y        Y(Buggy)   N
IE8              Y          N        Y        Y(Buggy)   Y
IE9              Y          Y        Y        Y(Buggy)   Y
IE10             Y          Y        Y        Y          Y
FF3.0            Y          Y        Y        Y          N    IE=Internet Explorer
FF3.5/FF3.6      Y          Y        Y        Y          Y    FF=Mozilla Firefox
FF4b1            Y          Y        Y        Y          Y    GC=Google Chrome
GC4/GC5          Y          Y        Y        Y          Y    Y=YES,N=NO
Safari4/Safari5  Y          Y        Y        Y          Y
Opera10.10/
Opera10.53/      Y          Y        Y        Y(Buggy)   Y
Opera10.60
Opera 12         Y          Y        Y        Y          Y

Nützliche Links

  1. Um die Unterstützung dieser Methoden mit allen Fehlern einschließlich weiterer Details anzuzeigen, klicken Sie hier
  2. Unterschied zwischen statischen Sammlungen und Live-Sammlungen klicken Sie hier
  3. Unterschied zwischen NodeList und HTMLCollection klicken Sie hier
1514
bugwheels94
//creates a listener for when you press a key
window.onkeyup = keyup;

//creates a global Javascript variable
var inputTextValue;

function keyup(e) {
  //setting your input text to the global Javascript Variable for every key press
  inputTextValue = e.target.value;

  //listens for you to press the ENTER key, at which point your web address will change to the one you have input in the search box
  if (e.keyCode == 13) {
    window.location = "http://www.myurl.com/search/" + inputTextValue;
  }
}

Sehen Sie diese Funktion in Codepen.

20
maudulus

Ich würde eine Variable erstellen, um die Eingabe wie folgt zu speichern:

var input = document.getElementById("input_id").value;

Und dann würde ich einfach die Variable verwenden, um den Eingabewert zur Zeichenkette hinzuzufügen.

= "Your string" + input;

13

Sie können auch durch Markennamen aufrufen: form_name.input_name.value;So haben Sie den bestimmten Wert der bestimmten Eingabe in einem bestimmten Formular.

12
user3768564

Sie sollten Folgendes eingeben können:

var input = document.getElementById("searchTxt");

function searchURL() {
     window.location = "http://www.myurl.com/search/" + input.value;
}
<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>

Ich bin sicher, dass es bessere Möglichkeiten gibt, dies zu tun, aber diese scheint in allen Browsern zu funktionieren, und es erfordert nur ein Minimum an JavaScript, um Änderungen vornehmen, verbessern und bearbeiten zu können.

7
Fredrik A.

Probier diese

<input type="text" onKeyup="trackChange(this.value)" id="myInput">
<script>
function trackChange(value)
{

window.open("http://www.google.co.in/search?output=search&q="+value)

}
</script>
3
Hari Das

In Chrome und Firefox getestet:

Wert nach Element-ID abrufen:

<input type="text" maxlength="512" id="searchTxt" class="searchField"/>
<input type="button" value="Get Value" onclick="alert(searchTxt.value)">

Wert im Formularelement einstellen:

<form name="calc" id="calculator">
  <input type="text" name="input">
  <input type="button" value="Set Value" onclick="calc.input.value='Set Value'">
</form>

https://jsfiddle.net/tuq79821/

Schauen Sie sich auch eine JavaScript-Taschenrechner-Implementierung an: http://www.4stud.info/web-programming/samples/dhtml-calculator.html

UPDATE von @ bugwheels94: Wenn Sie diese Methode verwenden, beachten Sie dieses Problem .

2
GKislin

Sie können die form.elements verwenden, um alle Elemente in einem Formular abzurufen. Wenn ein Element eine ID hat, kann es mit .namedItem ("id") gefunden werden. Beispiel:

var myForm = document.getElementById("form1");
var text = myForm.elements.namedItem("searchTxt").value;
var url = "http://www.myurl.com/search/" + text;

Quelle: w3schools

1
Valter Ekholm

einfache js

function copytext(text) {
    var textField = document.createElement('textarea');
    textField.innerText = text;
    document.body.appendChild(textField);
    textField.select();
    document.execCommand('copy');
    textField.remove();
}
<input id="new" >
    <button  onselect="myFunction()">it</button>    
    <script>
        function myFunction() {
            document.getElementById("new").value = "a";    
        }
    </script>
0
Davinder Singh

Sie können onkeyup verwenden, wenn Sie mehr Eingabefeld haben. Angenommen, Sie haben vier oder input.then document.getElementById('something').value ist ärgerlich. Wir müssen 4 Zeilen schreiben, um den Wert des Eingabefeldes abzurufen.

Sie können also eine Funktion erstellen, die beim Keyup- oder Keydown-Ereignis Werte in einem Objekt speichert.

Beispiel:

<div class="container">
    <div>
        <label for="">Name</label>
        <input type="text" name="fname" id="fname" onkeyup=handleInput(this)>
    </div>
    <div>
        <label for="">Age</label>
        <input type="number" name="age" id="age" onkeyup=handleInput(this)>
    </div>
    <div>
        <label for="">Email</label>
        <input type="text" name="email" id="email" onkeyup=handleInput(this)>
    </div>
    <div>
        <label for="">Mobile</label>
        <input type="number" name="mobile" id="number" onkeyup=handleInput(this)>
    </div>
    <div>
        <button onclick=submitData()>Submit</button>
    </div>
</div>

javascript:

<script>
    const data={ };
    function handleInput(e){
        data[e.name] = e.value;
    }
    function submitData(){
        console.log(data.fname); //get first name from object
        console.log(data); //return object
    }
</script>
0
Dhruv Raval