本文翻译自:How do I get the value of text input field using JavaScript?
I am working on a search with JavaScript. 我正在使用JavaScript进行搜索。 I would use a form, but it messes up something else on my page. 我会使用一种表格,但是它弄乱了我页面上的其他内容。 I have this input text field: 我有此输入文本字段:
<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>
And this is my JavaScript code: 这是我的JavaScript代码:
<script type="text/javascript">
function searchURL(){
window.location = "http://www.myurl.com/search/" + (input text value);
}
</script>
How do I get the value from the text field into JavaScript? 如何从文本字段获取值到JavaScript?
#1楼
参考:https://stackoom.com/question/mWEI/如何使用JavaScript获取文本输入字段的值
#2楼
There are various methods to get an input textbox value directly (without wrapping the input element inside a form element): 有多种方法可以直接获取输入文本框值(无需将输入元素包装在表单元素内):
Method 1: 方法1:
document.getElementById('textbox_id').value
to get the value of desired boxdocument.getElementById('textbox_id').value
获取所需框的值For example,
document.getElementById("searchTxt").value;
例如,document.getElementById("searchTxt").value;
Note: Method 2,3,4 and 6 returns a collection of elements, so use [whole_number] to get the desired occurrence. 注意:方法2、3、4和6返回元素的集合,因此请使用[whole_number]获得所需的出现。 For the first element, use [0], for the second one use 1 , and so on... 对于第一个元素,使用[0],对于第二个元素,使用1 ,依此类推...
Method 2: 方法2:
Use
document.getElementsByClassName('class_name')[whole_number].value
which returns a Live HTMLCollection 使用document.getElementsByClassName('class_name')[whole_number].value
返回一个实时HTMLCollectionFor example,
document.getElementsByClassName("searchField")[0].value;
例如,document.getElementsByClassName("searchField")[0].value;
if this is the first textbox in your page. 如果这是页面中的第一个文本框。
Method 3: 方法3:
Use
document.getElementsByTagName('tag_name')[whole_number].value
which also returns a live HTMLCollection 使用document.getElementsByTagName('tag_name')[whole_number].value
还会返回实时HTMLCollectionFor example,
document.getElementsByTagName("input")[0].value;
例如,document.getElementsByTagName("input")[0].value;
, if this is the first textbox in your page. ,如果这是页面中的第一个文本框。
Method 4: 方法4:
document.getElementsByName('name')[whole_number].value
which also >returns a live NodeListdocument.getElementsByName('name')[whole_number].value
也可以返回活动的NodeListFor example,
document.getElementsByName("searchTxt")[0].value;
例如,document.getElementsByName("searchTxt")[0].value;
if this is the first textbox with name 'searchtext' in your page. 如果这是页面中第一个名称为“ searchtext”的文本框。
Method 5: 方法5:
Use the powerful
document.querySelector('selector').value
which uses a CSS selector to select the element 使用功能强大的document.querySelector('selector').value
使用CSS选择器选择元素For example,
document.querySelector('#searchTxt').value;
例如,document.querySelector('#searchTxt').value;
selected by id 由ID选择document.querySelector('.searchField').value;
selected by class 按班级选择document.querySelector('input').value;
selected by tagname 按标记名选择document.querySelector('[name="searchTxt"]').value;
selected by name 按名称选择
Method 6: 方法6:
document.querySelectorAll('selector')[whole_number].value
which also uses a CSS selector to select elements, but it returns all elements with that selector as a static Nodelist.document.querySelectorAll('selector')[whole_number].value
也使用CSS选择器来选择元素,但它将带有该选择器的所有元素作为静态Nodelist返回。For example,
document.querySelectorAll('#searchTxt')[0].value;
例如,document.querySelectorAll('#searchTxt')[0].value;
selected by id 由ID选择document.querySelectorAll('.searchField')[0].value;
selected by class 按班级选择document.querySelectorAll('input')[0].value;
selected by tagname 按标记名选择document.querySelectorAll('[name="searchTxt"]')[0].value;
selected by name 按名称选择
Support 支持
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
Useful links 有用的链接
- To see the support of these methods with all the bugs including more details click here 要查看所有错误(包括更多详细信息)对这些方法的支持,请单击此处。
- Difference Between Static collections and Live collections click Here 静态集合和实时集合之间的区别,请单击此处
- Difference Between NodeList and HTMLCollection click Here NodeList和HTMLCollection之间的区别请单击此处
#3楼
Try this one 试试这个
<input type="text" onkeyup="trackChange(this.value)" id="myInput">
<script>
function trackChange(value) {
window.open("http://www.google.com/search?output=search&q=" + value)
}
</script>
#4楼
You should be able to type: 您应该可以输入:
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"/>
I'm sure there are better ways to do this, but this one seems to work across all browsers, and it requires minimal understanding of JavaScript to make, improve, and edit. 我敢肯定,有更好的方法可以做到这一点,但是这种方法似乎可以在所有浏览器上正常工作,并且对JavaScript的理解,编写,改进和编辑都需要极少的了解。
#5楼
Also you can, call by tags names, like this: form_name.input_name.value;
您也可以按标签名称进行调用,如下所示: form_name.input_name.value;
So you will have the specific value of determined input in a specific form. 因此,您将以特定形式获得确定的输入的特定值。
#6楼
//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;
}
}