Wie erhalte ich den Wert des Texteingabefelds mit JavaScript?

873

Ich arbeite an einer Suche mit JavaScript. Ich würde ein Formular verwenden, aber es bringt etwas anderes auf meiner Seite 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?

user979331
quelle

Antworten:

1769

Es gibt verschiedene Methoden, um einen Eingabetextfeldwert direkt abzurufen (ohne das Eingabeelement in ein Formularelement einzuschließen):

Methode 1:

document.getElementById('textbox_id').value um den Wert der gewünschten Box zu erhalten

Zum Beispiel, document.getElementById("searchTxt").value;

 

Hinweis: Die Methoden 2,3,4 und 6 geben eine Sammlung von Elementen zurück. Verwenden Sie daher [ganze_Nummer], um das gewünschte Vorkommen zu erhalten. Verwenden Sie für das erste Element [0], für das zweite 1 und so weiter ...

Methode 2:

Verwenden Sie document.getElementsByClassName('class_name')[whole_number].valuediese Option, um eine Live-HTMLCollection zurückzugeben

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

Methode 3:

Verwenden Sie document.getElementsByTagName('tag_name')[whole_number].valuediese Option, um auch eine Live-HTMLCollection zurückzugeben

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

Methode 4:

document.getElementsByName('name')[whole_number].value Dies gibt auch eine Live-NodeList zurück

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

Methode 5:

Verwenden Sie die leistungsstarke document.querySelector('selector').valueOption, die einen CSS-Selektor verwendet, um das Element auszuwählen

Zum Beispiel document.querySelector('#searchTxt').value; ausgewählt durch ID
document.querySelector('.searchField').value;ausgewählt durch Klasse
document.querySelector('input').value;ausgewählt durch Tagname
document.querySelector('[name="searchTxt"]').value;ausgewählt durch Name

Methode 6:

document.querySelectorAll('selector')[whole_number].value Dabei wird auch ein CSS-Selektor zum Auswählen von Elementen verwendet, es werden jedoch alle Elemente mit diesem Selektor als statische Knotenliste zurückgegeben.

Zum Beispiel document.querySelectorAll('#searchTxt')[0].value; ausgewählt durch ID
document.querySelectorAll('.searchField')[0].value;ausgewählt durch Klasse
document.querySelectorAll('input')[0].value; ausgewählt durch Tagname
document.querySelectorAll('[name="searchTxt"]')[0].value;ausgewählt durch Name

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. Klicken Sie hier, um die Unterstützung dieser Methoden mit allen Fehlern einschließlich weiterer Details anzuzeigen
  2. Unterschied zwischen statischen Sammlungen und Live-Sammlungen Klicken Sie hier
  3. Unterschied zwischen NodeList und HTMLCollection Klicken Sie hier
Bugwheels94
quelle
IE8 unterstützt QSA , soweit ich sehen kann, es unterstützt nur keine CSS3-Selektoren in der Auswahlzeichenfolge.
Fabrício Matté
@ FabrícioMatté Ich habe gerade hier überprüft quirksmode.org/dom/tests/basics.html#querySelectorAll und es hat mir gesagt, dass es nicht
bugwheels94
Interessant. Einfacher Test in IE8 für Win7 zeigt , dass querySelectorunterstützt wird jsfiddle.net/syNvz/show und QSA zu jsfiddle.net/syNvz/2/show
Fabrício mattem
1
Sehr hilfreiches Dokument, das als Referenz gespeichert wird. Vielen Dank.
Andy
1
@ GKislin Ah! Aha. Schön, dass ich nichts davon wusste. Aber nachdem ich dies gelesen habe , zögere ich, diese Änderung gerade zur Antwort hinzuzufügen. Vielleicht werde ich es eines Tages mit einer Warnung hinzufügen, um es zu vermeiden. Einer der Gründe für eine Warnung wäre dies . Wenn Sie der Meinung sind, dass es wirklich schön ist, nehmen Sie entweder eine Bearbeitung mit einer Warnung vor oder fügen Sie auf Wunsch eine weitere Antwort hinzu :)
bugwheels94
33
//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 dies in Codepen.

Maudulus
quelle
Obwohl ich die Vollständigkeit der akzeptierten Antwort schätze, fand ich diese Antwort nützlich, um im JS-Code auf einen Wert zuzugreifen, der in ein DOM-Texteingabeelement (Textfeld) eingegeben wurde. Einzelheiten finden Sie in meiner Antwort an anderer Stelle in dieser Frage.
Victoria Stuart
17

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 Zeichenfolge hinzuzufügen.

= "Your string" + input;

Vadim Tatarnikov
quelle
Wenn Sie möchten, dass es sich um ein geeignetes Javascript-Objekt handelt, damit Sie programmgesteuert auf jede Eigenschaft zugreifen können, gehen Sie einfach wie folgt vor: var input = JSON.parse (document.getElementById ("input_id"). Value);
JakeJ
15

Sie sollten in der Lage sein:

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 mir sicher, dass es bessere Möglichkeiten gibt, dies zu tun, aber diese scheint in allen Browsern zu funktionieren, und es erfordert ein minimales Verständnis von JavaScript, um sie zu erstellen, zu verbessern und zu bearbeiten.

Fredrik A.
quelle
14

Sie können auch Tags wie form_name.input_name.value; folgt aufrufen: So haben Sie den spezifischen Wert der bestimmten Eingabe in einer bestimmten Form.

user3768564
quelle
Ja! Ich war von dieser Einfachheit überrascht. Werfen Sie einen Blick auf Realisierung von einfachen Rechner 4stud.info/web-programming/samples/dhtml-calculator.html ther jede Referenz für diese Javascript functiality Sind, verursachen ich , bevor ich immer jQuery oder getElementById verwenden
Grigory Kislin
5

Probier diese

<input type="text" onkeyup="trackChange(this.value)" id="myInput">
<script>
function trackChange(value) {
    window.open("http://www.google.com/search?output=search&q=" + value)
}
</script>
Hari Das
quelle
4

Getestet in Chrome und Firefox:

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 festlegen:

<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 .

Grigory Kislin
quelle
3

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

Sie können also eine Funktion erstellen, die den Wert im Objekt beim Keyup- oder Keydown-Ereignis 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>
Dhruv Raval
quelle
2

Man kann 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

Valter Ekholm
quelle
2

Wenn Sie inputsich in einem befinden formund nach dem Absenden einen Wert erhalten möchten, können Sie dies tun

<form onsubmit="submitLoginForm(event)">
    <input type="text" name="name">
    <input type="password" name="password">
    <input type="submit" value="Login">
</form>

<script type="text/javascript">

    function submitLoginForm(event){
        event.preventDefault();

        console.log(event.target['name'].value);
        console.log(event.target['password'].value);
    }
</script>

Vorteil dieser Möglichkeit: Beispiel: Ihre Seite verfügt über 2 form Eingaben senderund receiverInformationen.

Wenn Sie nicht formfür den Abrufwert verwenden, dann
- können Sie 2 verschiedene id(oder tagoder name...) für jedes Feld wie sender-nameund receiver-name, sender-addressund receiver-address, ...
festlegen. - Wenn Sie denselben Wert für 2 Eingaben festlegen, dann nach getElementsByName(oder getElementsByTagName.. .) Sie müssen sich daran erinnern, dass 0 oder 1 senderoder ist receiver. Wenn Sie später die Reihenfolge 2 formin HTML ändern , müssen Sie diesen Code erneut überprüfen

Wenn Sie verwenden form, dann können Sie verwenden name, address...

Phan Van Linh
quelle
1
<input id="new" >
    <button  onselect="myFunction()">it</button>    
    <script>
        function myFunction() {
            document.getElementById("new").value = "a";    
        }
    </script>
Davinder Singh
quelle
1

einfache js

function copytext(text) {
    var textField = document.createElement('textarea');
    textField.innerText = text;
    document.body.appendChild(textField);
    textField.select();
    document.execCommand('copy');
    textField.remove();
}
Ricardo Luis Zuluaga Salazar
quelle
-2

Sie können den Wert von lesen

searchTxt.value

Kamil Kiełczewski
quelle
-3

Wenn Sie jQuery verwenden, müssen Sie nur das Plugin formInteract verwenden:

// Just keep the HTML as it is.

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

Fügen Sie am Ende der Seite einfach diese Plugin-Datei hinzu und schreiben Sie diesen Code:

// Initialize one time at the bottom of the page.
var search= $("#searchTxt).formInteract();

search.getAjax("http://www.myurl.com/search/", function(rsp){
    // Now do whatever you want to with your response
});

Oder wenn Sie eine parametrisierte URL verwenden, verwenden Sie diese:

$.get("http://www.myurl.com/search/"+search.get().searchTxt, {}, function(rsp){
    // Now do work with your response;
})

Hier ist der Link zum Projekt https://bitbucket.org/ranjeet1985/forminteract

Sie können dieses Plugin für viele Zwecke verwenden, z. B. zum Abrufen des Werts eines Formulars, zum Einfügen von Werten in ein Formular, zum Überprüfen von Formularen und vieles mehr. Sie können ein Beispiel für Code in der Datei index.html des Projekts sehen.

Natürlich bin ich der Autor dieses Projekts und alle sind herzlich eingeladen, es besser zu machen.

Ranjeet Rana
quelle
7
Sie sollten wahrscheinlich erwähnen, dass dies Ihr persönliches Plugin ist.
Hanna
Es gibt einen Tippfehler in Codefragmenten. Im zweiten Teil des Codes fehlt ein doppeltes Anführungszeichen.
Vincenzo