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

如何使用JavaScript获取文本输入字段的值?,第1张

如何使用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
哪个将返回实时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/6IE6   Y(Buggy)   N        Y        Y(Buggy)   NIE7   Y(Buggy)   N        Y        Y(Buggy)   NIE8   Y          N        Y        Y(Buggy)   YIE9   Y          Y        Y        Y(Buggy)   YIE10  Y          Y        Y        Y          YFF3.0 Y          Y        Y        Y          N    IE=Internet ExplorerFF3.5/FF3.6      Y          Y        Y        Y          Y    FF=Mozilla FirefoxFF4b1 Y          Y        Y        Y          Y    GC=Google ChromeGC4/GC5          Y          Y        Y        Y          Y    Y=YES,N=NOSafari4/Safari5  Y          Y        Y        Y          YOpera10.10/Opera10.53/      Y          Y        Y        Y(Buggy)   YOpera10.60Opera 12         Y          Y        Y        Y          Y


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/zaji/4946372.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-11-13
下一篇2022-11-13

发表评论

登录后才能评论

评论列表(0条)

    保存