JavaScript-Tipp: Ermitteln Sie den Wert eines Texteingabefelds

Question

Ich verwende JavaScript für die Suche. Ich möchte ein Formular verwenden, aber dadurch werden andere Dinge auf meiner Seite beschädigt. Ich habe dieses Eingabetextfeld:

<input name="searchTxt" />

Das ist mein JavaScript-Code:

<script type="text/javascript">
  Funktion searchURL(){
    window.location = "http://www.myurl.com/search/"
  }
</script>

Wie übergebe ich den Wert eines Textfelds an 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