如何使用JavaScript获取文本输入字段的值？

本文翻译自：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 box document.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返回一个实时HTMLCollection

For 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还会返回实时HTMLCollection

For 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 NodeList document.getElementsByName('name')[whole_number].value也可以返回活动的NodeList

For 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 有用的链接

1. To see the support of these methods with all the bugs including more details click here 要查看所有错误（包括更多详细信息）对这些方法的支持，请单击此处。
2. Difference Between Static collections and Live collections click Here 静态集合和实时集合之间的区别，请单击此处
3. 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;
  }
}

See this functioning in codepen. 参见Codepen中的此功能。