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
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"
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
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"
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"
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"
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!