Существуют различные методы для непосредственного получения входного значения текстового поля (без обертывания входного элемента внутри элемента формы):
Способ 1:
document.getElementById('textbox_id').value
чтобы получить значение желаемой коробки
Например, document.getElementById("searchTxt").value;
Примечание. Метод 2,3,4 и 6 возвращает коллекцию элементов, поэтому используйте [whole_number], чтобы получить желаемое вхождение. Для первого элемента используйте [0], для второго - 1 и так далее ...
Способ 2:
Использование,
document.getElementsByClassName('class_name')[whole_number].value
которое возвращает Live HTMLCollection
Например, document.getElementsByClassName("searchField")[0].value;
если это первое текстовое поле на вашей странице.
Способ 3:
Использование, document.getElementsByTagName('tag_name')[whole_number].value
которое также возвращает живой HTMLCollection
Например, document.getElementsByTagName("input")[0].value;
если это первое текстовое поле на вашей странице.
Способ 4:
document.getElementsByName('name')[whole_number].value
который также> возвращает живой NodeList
Например, document.getElementsByName("searchTxt")[0].value;
если это первое текстовое поле с именем 'searchtext' на вашей странице.
Способ 5:
Используйте мощный, document.querySelector('selector').value
который использует селектор CSS, чтобы выбрать элемент
Например, document.querySelector('#searchTxt').value;
выбирается по идентификатору,
document.querySelector('.searchField').value;
выбирается по классу,
document.querySelector('input').value;
выбирается по тэгу,
document.querySelector('[name="searchTxt"]').value;
выбирается по имени
Способ 6:
document.querySelectorAll('selector')[whole_number].value
который также использует селектор CSS для выбора элементов, но возвращает все элементы с этим селектором в виде статического списка узлов.
Например, document.querySelectorAll('#searchTxt')[0].value;
выбирается по идентификатору,
document.querySelectorAll('.searchField')[0].value;
выбирается по классу,
document.querySelectorAll('input')[0].value;
выбирается по тэгу,
document.querySelectorAll('[name="searchTxt"]')[0].value;
выбирается по имени
Служба поддержки
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
Полезные ссылки
- Чтобы увидеть поддержку этих методов со всеми ошибками, включая более подробную информацию, нажмите здесь
- Разница между статическими коллекциями и живыми коллекциями нажмите здесь
- Разница между NodeList и HTMLCollection нажмите здесь