Как получить значение поля ввода текста с помощью JavaScript?
Я работаю над поиском с помощью JavaScript. Я бы использовал форму, но на моей странице это все испортило. У меня есть это текстовое поле ввода:
<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>
И это мой код JavaScript:
<script type="text/javascript">
function searchURL(){
window.location = "http://www.myurl.com/search/" + (input text value);
}
</script>
Как мне получить значение из текстового поля в JavaScript?
Ответы
Ответ 1
Существуют различные методы для получения значения входного текстового поля напрямую (без обертки элемента ввода внутри элемента формы):
Метод 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;, если это первое текстовое поле с названием "поиск текста" на вашей странице.
Метод 5:
Используйте мощный document.querySelector('selector').value, который использует селектор CSS для выбора элемента
Например, document.querySelector('#searchTxt').value;, выбранный id
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;, выбранный id
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
Полезные ссылки
Ответ 2
//creates a listener for when you press a key
window.onkeyup = keyup;
//creates a global Javascript variable
var inputTextValue;
function keyup(e) {
//setting your input text to the global Javascript Variable for every key press
inputTextValue = e.target.value;
//listens for you to press the ENTER key, at which point your web address will change to the one you have input in the search box
if (e.keyCode == 13) {
window.location = "http://www.myurl.com/search/" + inputTextValue;
}
}
Посмотрите, как это работает в кодефене.
Ответ 3
Я бы создал переменную для хранения ввода следующим образом:
var input = document.getElementById("input_id").value;
И тогда я бы просто использовал переменную, чтобы добавить входное значение в строку.
= "Your string" + input;
Ответ 4
Также вы можете вызвать имена тегов, например: form_name.input_name.value;
Таким образом, у вас будет определенное значение определенного ввода в определенной форме.
Ответ 5
Вы должны быть в состоянии напечатать:
var input = document.getElementById("searchTxt");
function searchURL() {
window.location = "http://www.myurl.com/search/" + input.value;
}
<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>
Ответ 6
Попробуйте этот
<input type="text" onKeyup="trackChange(this.value)" id="myInput">
<script>
function trackChange(value)
{
window.open("http://www.google.co.in/search?output=search&q="+value)
}
</script>
Ответ 7
Протестировано в Chrome и Firefox:
Получить значение по id элемента:
<input type="text" maxlength="512" id="searchTxt" class="searchField"/>
<input type="button" value="Get Value" onclick="alert(searchTxt.value)">
Установленное значение в элементе формы:
<form name="calc" id="calculator">
<input type="text" name="input">
<input type="button" value="Set Value" onclick="calc.input.value='Set Value'">
</form>
https://jsfiddle.net/tuq79821/
Также посмотрите на реализацию калькулятора JavaScript: http://www.4stud.info/web-programming/samples/dhtml-calculator.html
UPDATE from @bugwheels94: при использовании этого метода следует знать эту проблему.
Ответ 8
Можно использовать form.elements, чтобы получить все элементы в форме. Если элемент имеет идентификатор, его можно найти с помощью. NamedItem ("id"). Пример:
var myForm = document.getElementById("form1");
var text = myForm.elements.namedItem("searchTxt").value;
var url = "http://www.myurl.com/search/" + text;
Источник: w3schools
Ответ 9
<input id="new" >
<button onselect="myFunction()">it</button>
<script>
function myFunction() {
document.getElementById("new").value = "a";
}
</script>
Ответ 10
Вы можете использовать onkeyup, когда у вас есть больше поля ввода. Предположим, у вас есть четыре или input.then document.getElementById('something').value раздражает. нам нужно написать 4 строки, чтобы получить значение поля ввода.
Таким образом, вы можете создать функцию, которая хранит значение в объекте по событию keyup или keydown.
Пример:
<div class="container">
<div>
<label for="">Name</label>
<input type="text" name="fname" id="fname" onkeyup=handleInput(this)>
</div>
<div>
<label for="">Age</label>
<input type="number" name="age" id="age" onkeyup=handleInput(this)>
</div>
<div>
<label for="">Email</label>
<input type="text" name="email" id="email" onkeyup=handleInput(this)>
</div>
<div>
<label for="">Mobile</label>
<input type="number" name="mobile" id="number" onkeyup=handleInput(this)>
</div>
<div>
<button onclick=submitData()>Submit</button>
</div>
</div>
JavaScript:
<script>
const data={ };
function handleInput(e){
data[e.name] = e.value;
}
function submitData(){
console.log(data.fname); //get first name from object
console.log(data); //return object
}
</script>
Ответ 11
простой JS
function copytext(text) {
var textField = document.createElement('textarea');
textField.innerText = text;
document.body.appendChild(textField);
textField.select();
document.execCommand('copy');
textField.remove();
}
Ответ 12
Если вы используете jQuery, то, используя плагин formInteract, вам просто нужно это сделать:
// Just keep the HTML as it is.
<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>
Внизу страницы просто включите этот файл плагина и напишите этот код:
// Initialize one time at the bottom of the page.
var search= $("#searchTxt).formInteract();
search.getAjax("http://www.myurl.com/search/", function(rsp){
// Now do whatever you want to with your response
});
Или, если вы используете параметризованный URL-адрес, используйте это:
$.get("http://www.myurl.com/search/"+search.get().searchTxt, {}, function(rsp){
// Now do work with your response;
})
Вот ссылка на проект https://bitbucket.org/ranjeet1985/forminteract
Вы можете использовать этот плагин для многих целей, таких как получение значения формы, внесение значений в форму, валидацию форм и многое другое. Вы можете увидеть пример кода в файле index.html проекта.
Конечно, я автор этого проекта, и все желающие могут сделать это лучше.
