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

Question

我正在用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中？

Answer 1

//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中的功能。

Answer 2

有多种方法可以直接获取输入textbox值（而不将输入元素包装在表单元素中）：

方法一：

document.getElementById('textbox_id').value获取所需框的值

例如，document.getElementById（“searchtxt”）.value；

 

注意：方法2、3、4和6返回一个元素集合，因此使用[whole_number]获得所需的出现。对于第一个元素，使用[0]，对于第二个元素，使用1，依此类推...

方法二：

使用document.getElementsByClassName('class_name')[whole_number].value返回实时HTMLCollection

例如，Document.GetElementsByClassName（“SearchField”）[0].Value；（如果这是页面中的第一个textbox）。

方法三：

使用document.getElementsByTagName('tag_name')[whole_number].value，它还返回一个实时的HTMLCollection

例如，document.getElementsByTagName（“input”）[0].value；，如果这是页面中的第一个textbox。

方法四：

document.getElementsByName('name')[whole_number].value它还>返回实时节点列表

例如，document.getElementsByName（“searchTxt”）[0].value；（如果这是页面中名为“searchText”的第一个textbox）。

方法五：

使用功能强大的document.queryselector('selector').value，它使用CSS选择器选择元素

例如，文档.QuerySelector('#searchtxt').value；由id选择
文档.QuerySelector('.searchfield').value；由class选择
文档.QuerySelector('input').value；由tagname选择
文档.QuerySelector('[name=“searchtxt”]').value；由名称选择

方法六：

document.queryselectorall('selector')[whole_number].value，它也使用CSS选择器来选择元素，但它以该选择器作为静态节点列表返回所有元素。

例如，文档.QuerySelectorAll('#searchtxt')[0].value；按id选择
文档.QuerySelectorAll('.searchfield')[0].value；按类
文档.QuerySelectorAll('.searchfield')选择[0].value；按tagname选择
文档.QuerySelectorAll('input')[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

有用的链接

1. 若要查看这些方法对所有bug的支持，包括更多详细信息，请单击此处
2. 静态集合和活动集合之间的区别单击此处
3. NodeList与HTMLCollection之间的区别单击此处