Wie erhalte ich den Wert eines Texteingabefeldes mit JavaScript?

Question

Ich arbeite gerade an einer Suche mit JavaScript. Ich würde ein Formular verwenden, aber das bringt etwas anderes auf meiner Seite durcheinander. Ich habe dieses Eingabe-Textfeld:

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

Und dies ist mein JavaScript-Code:

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

Wie kann ich den Wert aus dem Textfeld in JavaScript übertragen?

Answer 1

Es gibt verschiedene Methoden, um den Wert eines Eingabefeldes direkt abzurufen (ohne das Eingabeelement in ein Formularelement einzuschließen):

Methode 1

document.getElementById('textbox_id').value um den Wert von gewünschten Feldes

Zum Beispiel

document.getElementById("searchTxt").value;

  Anmerkung: Die Methoden 2, 3, 4 und 6 geben eine Sammlung von Elementen zurück, also verwenden Sie [whole_number], um das gewünschte Vorkommen zu erhalten. Für das erste Element, verwenden Sie [0] , für die zweite verwenden Sie [1] und so weiter...

Methode 2

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

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 die ebenfalls eine HTMLCollection zurückgibt

Zum Beispiel

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

Methode 4

document.getElementsByName('name')[whole_number].value die auch eine lebende NodeList zurückliefert

Zum Beispiel

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

Methode 5

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

Zum Beispiel

• document.querySelector('#searchTxt').value; ausgewählt nach id
• document.querySelector('.searchField').value; ausgewählt nach Klasse
• document.querySelector('input').value; ausgewählt durch tagname
• document.querySelector('[name="searchTxt"]').value; nach Namen ausgewählt

Methode 6

document.querySelectorAll('selector')[whole_number].value die ebenfalls einen CSS-Selektor zur Auswahl von Elementen verwendet, aber alle Elemente mit diesem Selektor als statische Nodelist zurückgibt.

Zum Beispiel

• document.querySelectorAll('#searchTxt')[0].value; ausgewählt nach id
• document.querySelectorAll('.searchField')[0].value; ausgewählt nach Klasse
• document.querySelectorAll('input')[0].value; ausgewählt durch tagname
• document.querySelectorAll('[name="searchTxt"]')[0].value; nach Namen ausgewählt

Unterstützung

Browser

Methode1

Methode2

Methode3

Methode4

Methode5/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=JA,N=NEIN

Safari4/Safari5

Y

Y

Y

Y

Y

Opera10.10/

Opera10.53/

Y

Y

Y

Y(Buggy)

Y

Oper10.60

Oper 12

Y

Y

Y

Y

Y

Nützliche Links

1. Um die Unterstützung für diese Methoden mit allen Fehlern und weiteren Details zu sehen, klicken Sie hier
2. Unterschied zwischen statischen Sammlungen und Live-Sammlungen klicken Sie hier
3. Unterschied zwischen NodeList und HTMLCollection hier klicken

Answer 2

//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;
  }
}

Siehe diese Funktion in codepen.

Answer 3

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;

Answer 4

Sie sollten in der Lage sein, zu tippen:

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 Methoden gibt, aber diese scheint in allen Browsern zu funktionieren und erfordert nur minimale Kenntnisse von JavaScript, um sie zu erstellen, zu verbessern und zu bearbeiten.

Answer 5

Sie können auch nach Tags benannt werden, etwa so: form_name.input_name.value; So erhalten Sie den spezifischen Wert einer bestimmten Eingabe in einer bestimmten Form.