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

//创建一个监听器，当你按下一个键时触发
window.onkeyup = keyup;

//创建一个全局的Javascript变量
var inputTextValue;

function keyup(e) {
  //将你的输入文本设置为全局的Javascript变量，每次按键都会更新
  inputTextValue = e.target.value;

  //监听你按下回车键，此时你的网址将会改变为你在搜索框中输入的网址
  if (e.keyCode == 13) {
    window.location = "http://www.myurl.com/search/" + inputTextValue;
  }
}

在codepen中查看此功能。

Answer 2

有多种方法可以直接获取输入文本框的值（而无需将输入元素包装在表单元素内）：

方法1

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

例如

document.getElementById("searchTxt").value;

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

方法2

使用document.getElementsByClassName('class_name')[整数].value，它返回一个实时的HTMLCollection

例如

document.getElementsByClassName("searchField")[0].value;，如果这是页面上的第一个文本框。

方法3

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

例如

document.getElementsByTagName("input")[0].value;，如果这是页面上的第一个文本框。

方法4

document.getElementsByName('name')[整数].value，它也返回一个实时的NodeList

例如

document.getElementsByName("searchTxt")[0].value;，如果这是页面上的第一个名称为'searchtext'的文本框。

方法5

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

例如

• document.querySelector('#searchTxt').value; 通过id选择
• document.querySelector('.searchField').value; 通过class选择
• document.querySelector('input').value; 通过标签名选择
• document.querySelector('[name="searchTxt"]').value; 通过名称选择

方法6

document.querySelectorAll('selector')[整数].value，它也使用CSS选择器来选择元素，但它将所有具有该选择器的元素作为静态NodeList返回。

例如

• document.querySelectorAll('#searchTxt')[0].value; 通过id选择
• document.querySelectorAll('.searchField')[0].value; 通过class选择
• document.querySelectorAll('input')[0].value; 通过标签名选择
• document.querySelectorAll('[name="searchTxt"]')[0].value; 通过名称选择

支持

浏览器	方法1	方法2	方法3	方法4	方法5/6
IE6	Y（有问题）	N	Y	Y（有问题）	N
IE7	Y（有问题）	N	Y	Y（有问题）	N
IE8	Y	N	Y	Y（有问题）	Y
IE9	Y	Y	Y	Y（有问题）	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（有问题）	Y
Opera10.60
Opera 12	Y	Y	Y	Y	Y