javascript - 如何使用JavaScript获取文本输入字段的值？(How do I get the value of text input field using JavaScript?)

Question

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？)

  ask by user979331 translate from so

Answer 1

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之间的区别请单击此处)