如何使用 JavaScript 获取文本输入字段的值？

我正在使用 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？

javascript dom input

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

方法 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 ，它还返回一个实时 NodeList
例如， document.getElementsByName("searchTxt")[0].value;如果这是您的页面中第一个名为 “searchtext” 的文本框。

方法 5：

使用功能强大的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 选择器来选择元素，但它将所有带有该选择器的元素作为静态 Nodelist 返回。
例如， document.querySelectorAll('#searchTxt')[0].value;由 id 选择
document.querySelectorAll('.searchField')[0].value;按班级选择
document.querySelectorAll('input')[0].value;由标记名选择
document.querySelectorAll('[name="searchTxt"]')[0].value;按名称选择

支持

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

有用的链接

//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 中看到这个功能。

我会创建一个变量来存储输入，如下所示：

var input = document.getElementById("input_id").value;

然后我会使用变量将输入值添加到字符串中。

= "Your string" + input;

协慌网

如何使用 JavaScript 获取文本输入字段的值？

答案