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

问题描述

我正在使用JavaScript进行搜索。我会使用一个表单，但它混淆了我的页面上的其他东西。我有这个输入文本字段：

 < input name =searchTxttype =textmaxlength =512id =searchTxtclass =searchField/> 
  

这是我的JavaScript代码：

 < script type =text / javascript> 
 function searchURL（）{
 window.location =http://www.myurl.com/search/+（输入文本值）; 
} 
< / script> 
  

如何从文本字段获取值到JavaScript？

解决方案

有各种各样的方法可以直接获取输入文本框值（不包含表单元素内的输入元素）：

方法1：

document.getElementById（'textbox_id' ）.value 获取
所需框的值

例如， document.getElementById（searchTxt）。value;

 

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

方法2：

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

例如， document.getElementsByClassName（searchField）[0] .value; 如果这是您网页中的第一个文本框。

方法3：

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

例如， document.getElementsByTagName（input）[0] .value; ，如果这是您网页中的第一个文本框。

方法4：

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

例如， document.getElementsByName（searchTxt）[0] .value; 如果这是您页面中第一个名为texttext的文本框。

方法5： strong>

使用强大的 document.querySelector（'selector'）。value 它使用CSS选择器来选择元素

例如， document.querySelector（'＃searchTxt'）。 value; 由id选择by
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;

document.querySelectorAll（'。searchField'）[0] .value; 由类别选择
document.querySelectorAll（'input'）[0] .value; 由标记名选择
document.querySelectorAll（'[name = searchTxt]'）[0] .value; 按名称选择

支持

 浏览器方法1方法2方法3方法4方法5/6 
 IE6 Y（Buggy）NYY（Buggy）N 
 IE7 Y（Buggy） NYY（Buggy）N 
 IE8 YNYY（Buggy）Y 
 IE9 YYYY（Buggy）Y 
 IE10 YYYYY 
 FF3.0 YYYYN IE = Internet Explorer 
 FF3.5 / FF3.6 YYYYY FF = Mozilla Firefox 
 FF4b1 YYYYY GC = Google Chrome 
 GC4 / GC5 YYYYYY = YES，N = NO 
 Safari4 / Safari5 YYYYY 
 Opera10.10 / 
 Opera10.53 / YYYY（Buggy ）Y 
 Opera10.60 
 Opera 12 YYYYY 
  

有用的链接

1. 要查看这些方法的支持，包括更多详细信息，请点击此处


2. 静态集合和Live集合之间的区别点击这里


3. NodeList和HTMLCollection之间的区别点击此处

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"/>

And this is my JavaScript code:

<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?

解决方案

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

Method 1:

document.getElementById('textbox_id').value to get the value of desired box

For example, 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. For the first element, use [0], for the second one use 1, and so on...

Method 2:

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

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

Method 3:

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

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

Method 4:

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

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

Method 5:

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

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

Method 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.

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

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

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