如何使用JavaScript获取文本input字段的值？
我正在使用JavaScript进行search。 我会使用一个表单，但它会弄乱我的页面上的其他东西。 我有这个input文本字段：
<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？
有多种方法直接获取input文本框的值（不包含表单元素中的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，它使用CSSselect器来select元素例如，
document.querySelector('#searchTxt').value;由idselect
document.querySelector('.searchField').value;由class级select
document.querySelector('input').value;通过标记名select
document.querySelector('[name="searchTxt"]').value;按名称select
方法6：
document.querySelectorAll('selector')[whole_number].value它也使用一个CSSselect器来select元素，但它返回所有具有该select器的元素作为一个静态NodeList。例如，
document.querySelectorAll('#searchTxt')[0].value;由idselect
document.querySelectorAll('.searchField')[0].value;由class级select
document.querySelectorAll('input')[0].value;通过标记名select
document.querySelectorAll('[name="searchTxt"]')[0].value;按名称select
支持
Browser Method1 Method2 Method3 Method4 Method5/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
有用的链接
- 看到这些方法的支持与所有的错误，包括更多的细节点击这里
- 点击此处查看静态集合和实况集合之间的区别
- NodeList和HTMLCollection的区别点击这里
//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运作。
我会创build一个variables来存储像这样的input：
var input = document.getElementById("input_id").value;
然后我只是使用该variables将input值添加到string。
= "Your string" + input;
你也可以通过标签名称来调用，例如： form_name.input_name.value; 因此，您将具有特定forms的确定input的具体价值。
你应该可以input：
<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/> <script> var input = document.getElementById("searchTxt"); function searchURL() { window.location = "http://www.myurl.com/search/" + input.value; } </script>
我相信有更好的方法来做到这一点，但这似乎在所有的浏览器上都能正常工作，并且需要对JavaScript进行最less的理解来完成，改进和编辑。
试试这个
<input type="text" onKeyup="trackChange(this.value)" id="myInput"> <script> function trackChange(value) { window.open("http://www.google.co.in/search?output=search&q="+value) } </script>
在Chrome和Firefox中testing：
通过元素id获取值：
<input type="text" maxlength="512" id="searchTxt" class="searchField"/> <input type="button" value="Get Value" onclick="alert(searchTxt.value)">
在表单元素中设置值：
<form name="calc" id="calculator"> <input type="text" name="input"> <input type="button" value="Set Value" onclick="calc.input.value='Set Value'"> </form>
https://jsfiddle.net/tuq79821/
另请参阅JavaScript计算器实现： http : //www.4stud.info/web-programming/samples/dhtml-calculator.html
从@ bugwheels94更新：使用这种方法时要注意这个问题 。
如果你使用jQuery，然后使用插件formInteract，你只需要这样做：
// Just keep the HTML as it is. <input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>
在页面的底部，只需包含这个插件文件并写下如下代码：
// Initialize one time at the bottom of the page. var search= $("#searchTxt).formInteract(); search.getAjax("http://www.myurl.com/search/", function(rsp){ // Now do whatever you want to with your response });
或者，如果使用参数化的URL，那么使用这个：
$.get("http://www.myurl.com/search/"+search.get().searchTxt, {}, function(rsp){ // Now do work with your response; })
这里是项目链接https://bitbucket.org/ranjeet1985/forminteract
你可以使用这个插件的目的很多，比如获取表单的值，将值放入表单，表单validation等等。 您可以在项目的index.html文件中看到一些代码示例。
当然，我是这个项目的作者，欢迎所有人加以改进。
