Существуют различные методы для непосредственного получения входного значения текстового поля (без обертывания входного элемента внутри элемента формы):
Способ 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 нажмите здесь
querySelector
поддерживается jsfiddle.net/syNvz/show и QSA тоже jsfiddle.net/syNvz/2/showСмотрите это функционирование в codepen.
источник
Я хотел бы создать переменную для хранения ввода, как это:
И тогда я бы просто использовал переменную, чтобы добавить входное значение в строку.
= "Your string" + input;
источник
Вы должны быть в состоянии напечатать:
Я уверен, что есть лучшие способы сделать это, но этот, кажется, работает во всех браузерах и требует минимального понимания JavaScript для создания, улучшения и редактирования.
источник
Также вы можете вызывать по тэгам имена, например так: у
form_name.input_name.value;
вас будет определенное значение определенного ввода в определенной форме.источник
Попробуй это
источник
Протестировано в Chrome и Firefox:
Получить значение по идентификатору элемента:
Установите значение в элементе формы:
https://jsfiddle.net/tuq79821/
Также взгляните на реализацию калькулятора JavaScript: http://www.4stud.info/web-programming/samples/dhtml-calculator.html
ОБНОВЛЕНИЕ от @ bugwheels94: при использовании этого метода следует помнить об этой проблеме .
источник
Вы можете использовать onkeyup, когда у вас есть больше поля ввода. Предположим, у вас есть четыре или input.then
document.getElementById('something').value
раздражает. нам нужно написать 4 строки, чтобы получить значение поля ввода.Таким образом, вы можете создать функцию, которая хранит значение в объекте по событию keyup или keydown.
Пример :
JavaScript:
источник
Можно использовать form.elements, чтобы получить все элементы в форме. Если элемент имеет идентификатор, его можно найти с помощью. NamedItem ("id"). Пример:
Источник: w3schools
источник
Если вы
input
в,form
и вы хотите получить значение после отправки, вы можете сделать какПреимущество этого способа: например, на вашей странице есть 2
form
для вводаsender
иreceiver
информации.Если вы не используете
form
для получения значения, то- Вы можете установить 2 разных
id
(илиtag
илиname
...) для каждого поля, какsender-name
иreceiver-name
,sender-address
иreceiver-address
, ...- Если вы установите одинаковое значение для 2 ввода, то после
getElementsByName
(илиgetElementsByTagName
.. .) вам нужно запомнить 0 или 1sender
илиreceiver
. Позже, если вы измените порядок 2form
в html, вам нужно снова проверить этот кодЕсли вы используете
form
, то вы можете использоватьname
,address
...источник
источник
простой JS
источник
Вы можете прочитать значение по
Показать фрагмент кода
источник
Если вы используете jQuery, то с помощью плагина formInteract вам просто нужно сделать это:
Внизу страницы просто включите этот файл плагина и напишите этот код:
Или, если используется параметризованный URL, используйте это:
Вот ссылка на проект https://bitbucket.org/ranjeet1985/forminteract
Вы можете использовать этот плагин для многих целей, таких как получение значения формы, помещение значений в форму, проверка форм и многое другое. Вы можете увидеть пример кода в файле index.html проекта.
Конечно, я являюсь автором этого проекта, и все желающие могут сделать его лучше.
источник