如何使用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：
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; 由id选择
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; 由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
有用的链接
//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;
}
}
在codepen中看到这个功能。
我会创建一个变量来存储像这样的输入：
var input = document.getElementById("input_id").value;
然后我会使用该变量将输入值添加到字符串。
= "Your string" + input;
上一篇: How do I get the value of text input field using JavaScript?
下一篇: How can I limit possible inputs in a HTML5 "number" element?