Heim > Web-Frontend > js-Tutorial > Wie erhalte ich den Wert eines Eingabetextfelds in JavaScript?

Wie erhalte ich den Wert eines Eingabetextfelds in JavaScript?

Linda Hamilton
Freigeben: 2024-12-21 21:33:22
Original
200 Leute haben es durchsucht

How Do I Get the Value of an Input Text Field in JavaScript?

Eingabetextfeldwerte in JavaScript abrufen

Als Antwort auf Ihre Anfrage stehen mehrere Methoden zum direkten Abrufen des Werts eines Eingabetextfelds ohne Verwendung von Formularen zur Verfügung.

Methode 1: Verwenden getElementById()

document.getElementById('textbox_id').value ruft den Wert des gewünschten Texteingabefelds direkt ab.

document.getElementById("searchTxt").value; // Get the value of the searchTxt text field
Nach dem Login kopieren

Methode 2: Verwenden getElementsByClassName()

document.getElementsByClassName('class_name')[whole_number].value gibt eine Live-HTMLCollection zurück und kann verwendet werden, um das gewünschte Textfeld basierend auf seiner Klasse auszuwählen.

document.getElementsByClassName("searchField")[0].value; // Get the value of the first text field with class "searchField"
Nach dem Login kopieren

Methode 3: Verwenden getElementsByTagName()

document.getElementsByTagName('input')[whole_number].value gibt auch eine Live-HTMLCollection zurück und ermöglicht Ihnen die Auswahl des gewünschten Textfelds basierend auf seinem Tag-Namen.

document.getElementsByTagName("input")[0].value; // Get the value of the first text input field
Nach dem Login kopieren

Methode 4: Verwenden getElementsByName()

document.getElementsByName('name')[whole_number].value gibt eine Live-NodeList zurück und kann verwendet werden, um das gewünschte Textfeld basierend auf seinem Namensattribut auszuwählen.

document.getElementsByName("searchTxt")[0].value; // Get the value of the first text field with name "searchTxt"
Nach dem Login kopieren

Methode 5: Verwenden querySelector()

document.querySelector('selector').value verwendet einen CSS-Selektor, um das gewünschte Textfeld auszuwählen.

document.querySelector('#searchTxt').value; // Get the value of the text field with id "searchTxt"
Nach dem Login kopieren

Methode 6: Verwenden querySelectorAll()

document.querySelectorAll('selector')[whole_number].value verwendet ebenfalls einen CSS-Selektor, um das gewünschte Textfeld auszuwählen, gibt jedoch eine statische NodeList zurück.

document.querySelectorAll('.searchField')[0].value; // Get the value of the first text field with class "searchField"
Nach dem Login kopieren

Die folgende Tabelle enthält Informationen zur Browserkompatibilität für diese Methoden:

Browser Method 1 Method 2 Method 3 Method 4 Method 5/6
IE6 Buggy No Yes Buggy No
IE7 Buggy No Yes Buggy No
IE8 Yes No Yes Buggy Yes
IE9 Yes Yes Yes Buggy Yes
IE10 Yes Yes Yes Yes Yes
FF3.0 Yes Yes Yes Yes No
FF3.5/FF3.6 Yes Yes Yes Yes Yes
FF4b1 Yes Yes Yes Yes Yes
GC4/GC5 Yes Yes Yes Yes Yes and Yes
Safari4/Safari5 Yes Yes Yes Yes Yes
Opera10.10/
Opera10.53/ Yes Yes Yes Buggy Yes
Opera10.60
Opera 12 Yes Yes Yes Yes Yes

Das obige ist der detaillierte Inhalt vonWie erhalte ich den Wert eines Eingabetextfelds in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage