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].value
diese 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].value
diese 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').value
Option, 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
- Klicken Sie hier, um die Unterstützung dieser Methoden mit allen Fehlern einschließlich weiterer Details anzuzeigen
- Unterschied zwischen statischen Sammlungen und Live-Sammlungen Klicken Sie hier
- Unterschied zwischen NodeList und HTMLCollection Klicken Sie hier
querySelector
unterstützt wird jsfiddle.net/syNvz/show und QSA zu jsfiddle.net/syNvz/2/showSehen Sie dies in Codepen.
quelle
Ich würde eine Variable erstellen, um die Eingabe wie folgt zu speichern:
Und dann würde ich einfach die Variable verwenden, um den Eingabewert zur Zeichenfolge hinzuzufügen.
= "Your string" + input;
quelle
Sie sollten in der Lage sein:
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.
quelle
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.quelle
Probier diese
quelle
Getestet in Chrome und Firefox:
Wert nach Element-ID abrufen:
Wert im Formularelement festlegen:
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 .
quelle
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:
Javascript:
quelle
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:
Quelle: w3schools
quelle
Wenn Sie
input
sich in einem befindenform
und nach dem Absenden einen Wert erhalten möchten, können Sie dies tunVorteil dieser Möglichkeit: Beispiel: Ihre Seite verfügt über 2
form
Eingabensender
undreceiver
Informationen.Wenn Sie nicht
form
für den Abrufwert verwenden, dann- können Sie 2 verschiedene
id
(odertag
odername
...) für jedes Feld wiesender-name
undreceiver-name
,sender-address
undreceiver-address
, ...festlegen. - Wenn Sie denselben Wert für 2 Eingaben festlegen, dann nach
getElementsByName
(odergetElementsByTagName
.. .) Sie müssen sich daran erinnern, dass 0 oder 1sender
oder istreceiver
. Wenn Sie später die Reihenfolge 2form
in HTML ändern , müssen Sie diesen Code erneut überprüfenWenn Sie verwenden
form
, dann können Sie verwendenname
,address
...quelle
quelle
einfache js
quelle
Sie können den Wert von lesen
Code-Snippet anzeigen
quelle
Wenn Sie jQuery verwenden, müssen Sie nur das Plugin formInteract verwenden:
Fügen Sie am Ende der Seite einfach diese Plugin-Datei hinzu und schreiben Sie diesen Code:
Oder wenn Sie eine parametrisierte URL verwenden, verwenden Sie diese:
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.
quelle