Існують різні методи для отримання значення вхідного текстового поля безпосередньо (без загортання вхідного елемента всередині елемента форми):
Спосіб 1:
document.getElementById('textbox_id').value
щоб отримати значення потрібного поля
Наприклад, document.getElementById("searchTxt").value;
Примітка. Метод 2,3,4 та 6 повертає колекцію елементів, тому використовуйте [весь_число], щоб отримати бажане явище. Для першого елемента використовуйте [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 для вибору елементів, але повертає всі елементи з цим селектором як статичний Nodelist.
Наприклад, 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 натисніть тут