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

如何使用 JavaScript 检索文本输入字段的值？

在表单元素可能破坏网页其他方面的情况下，获取输入文本字段值直接变得必要。 JavaScript 提供了多种方法来实现此目的：

方法 1：document.getElementById

document.getElementById('searchTxt').value;

此方法通过输入字段的 ID 检索输入字段的值。

方法二： document.getElementsByClassName

document.getElementsByClassName('searchField')[0].value;

此方法选择具有特定类的所有输入字段并返回 HTMLCollection。使用 [0] 访问第一个元素（如果有多个元素）。

方法 3：document.getElementsByTagName

document.getElementsByTagName('input')[0].value;

此方法选择所有输入元素在页面上并返回 HTMLCollection。再次对第一个元素使用 [0]。

方法 4：document.getElementsByName

document.getElementsByName('searchTxt')[0].value;

此方法检索具有特定名称的所有输入字段。第一次出现时使用 [0]。

方法 5：document.querySelector

document.querySelector('#searchTxt').value;
document.querySelector('.searchField').value;

此方法使用 CSS 选择器来选择元素，从而实现定向检索。

方法六： document.querySelectorAll

document.querySelectorAll('#searchTxt')[0].value;
document.querySelectorAll('.searchField')[0].value;

与 document.querySelector 类似，此方法使用 CSS 选择器，但返回所有匹配元素的 NodeList。第一个元素使用 [0]。

浏览器支持

下表显示了这些方法在不同浏览器中的支持级别：

Browser	Method 1	Method 2	Method 3	Method 4	Method 5/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
FF3.5/FF3.6	Y	Y	Y	Y	Y
FF4b1	Y	Y	Y	Y	Y
GC4/GC5	Y	Y	Y	Y	Y
Safari4/Safari5	Y	Y	Y	Y	Y
Opera10.10/	Y	Y	Y	Y(Buggy)	Y
Opera10.53/	Y	Y	Y	Y	Y
Opera10.60	Y	Y	Y	Y	Y
Opera 12	Y	Y	Y	Y	Y

以上是如何使用 JavaScript 获取文本输入字段的值？的详细内容。更多信息请关注PHP中文网其他相关文章！