如何使用 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？

原文由 user979331 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

方法一

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

想要的盒子

例如

document.getElementById("searchTxt").value;

注意： 方法 2,3,4 和 6 返回元素的集合，因此使用 [whole_number] 来获取所需的出现次数。对于第一个元素，使用 [0] ，

第二个使用 [1] ，依此类推…

方法二

利用

document.getElementsByClassName('class_name')[whole_number].value 返回一个 Live HTMLCollection

例如

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

方法三

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

例如

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

方法四

document.getElementsByName('name')[whole_number].value 也 > 返回一个活动的 NodeList

例如

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

方法五

使用强大的 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 选择器来选择元素，但它会将具有该选择器的所有元素作为静态节点列表返回。

例如

• document.querySelectorAll('#searchTxt')[0].value; 由 id 选择

• document.querySelectorAll('.searchField')[0].value; 按班级选择

• document.querySelectorAll('input')[0].value; 由标记名选择

• document.querySelectorAll('[name="searchTxt"]')[0].value; 按名称选择

支持

浏览器方法1方法2方法3方法4方法5/6 IE6 Y（越野车） ñ是Y（越野车） ñ IE7 Y（越野车） ñ是Y（越野车） ñ IE8是ñ是Y（越野车）是IE9是是是Y（越野车）是IE10是是是是是FF3.0是是是是N IE=Internet Explorer FF3.5/FF3.6是是是是Y FF=Mozilla 火狐FF4b1是是是是Y GC=谷歌浏览器GC4/GC5是是是是年=是，N=否Safari4/Safari5是是是是是Opera10.10/ Opera10.53/是是是Y（越野车）是歌剧10.60歌剧 12是是是是是

有用的链接

1. 要查看这些方法的支持以及所有错误，包括更多详细信息，请单击此处

2. 静态集合和实时集合之间的区别单击此处

3. NodeList 和 HTMLCollection 的区别点击这里

原文由 bugwheels94 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

//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 中查看此功能。

原文由 maudulus 发布，翻译遵循 CC BY-SA 3.0 许可协议