如何使用 JavaScript 获取文本输入字段的值? [英] How do I get the value of text input field using JavaScript?

问题描述

我正在使用 JavaScript 进行搜索.我会使用表单，但它会弄乱我页面上的其他内容.我有这个输入文本字段:

I am working on a search with 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"/>

这是我的 JavaScript 代码:

And this is my JavaScript code:

<script type="text/javascript">
  function searchURL(){
    window.location = "http://www.myurl.com/search/" + (input text value);
  }
</script>

如何将文本字段中的值获取到 JavaScript 中?

How do I get the value from the text field into JavaScript?

推荐答案

有多种方法可以直接获取输入文本框的值(无需将输入元素包裹在表单元素中):

There are various methods to get an input textbox value directly (without wrapping the input element inside a form element):

方法一:

document.getElementById('textbox_id').value 获取想要的盒子

例如 document.getElementById("searchTxt").value;

 

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

Note: Method 2,3,4 and 6 returns a collection of elements, so use [whole_number] to get the desired occurrence. For the first element, use [0], for the second one use 1, and so on...

方法二:

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

Use document.getElementsByClassName('class_name')[whole_number].value which returns a Live HTMLCollection

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

For example, document.getElementsByClassName("searchField")[0].value; if this is the first textbox in your page.

方法 3:

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

Use document.getElementsByTagName('tag_name')[whole_number].value which also returns a live HTMLCollection

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

For example, document.getElementsByTagName("input")[0].value;, if this is the first textbox in your page.

方法四:

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

document.getElementsByName('name')[whole_number].value which also >returns a live NodeList

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

For example, document.getElementsByName("searchTxt")[0].value; if this is the first textbox with name 'searchtext' in your page.

方法 5:

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

Use the powerful document.querySelector('selector').value which uses a CSS selector to select the element

例如 document.querySelector('#searchTxt').value; 由id选择
document.querySelector('.searchField').value; 选择的类
document.querySelector('input').value; 由标记名选择
document.querySelector('[name="searchTxt"]').value; 按名称选择

For example, document.querySelector('#searchTxt').value; selected by id
document.querySelector('.searchField').value; selected by class
document.querySelector('input').value; selected by tagname
document.querySelector('[name="searchTxt"]').value; selected by name

方法 6:

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

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('#searchTxt')[0].value; 由id选择
document.querySelectorAll('.searchField')[0].value; 选择的类
document.querySelectorAll('input')[0].value; 由标记名选择
document.querySelectorAll('[name="searchTxt"]')[0].value; 按名称选择

For example, document.querySelectorAll('#searchTxt')[0].value; selected by 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

支持

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. 要查看这些方法的支持以及所有错误，包括更多详细信息，请单击此处
2. 两者的区别静态集合和实时集合单击此处
3. NodeList 和 HTMLCollection 的区别点击这里

这篇关于如何使用 JavaScript 获取文本输入字段的值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！