我正在使用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？
Answers:
有多种方法可以直接获取输入文本框值（无需将输入元素包装在表单元素内）：
方法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/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;
}
}我将创建一个变量来存储输入，如下所示：
var input = document.getElementById("input_id").value;然后，我将使用变量将输入值添加到字符串中。
= "Your string" + input;
您应该可以输入：
var input = document.getElementById("searchTxt");
function searchURL() {
window.location = "http://www.myurl.com/search/" + input.value;
}<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>我敢肯定，有更好的方法可以做到这一点，但是这种方法似乎可以在所有浏览器上正常工作，并且它对JavaScript的理解，编写，改进和编辑需要最少的了解。
同样，您也可以按标签名称进行调用，如下所示：form_name.input_name.value;
这样，您将以特定的形式获得确定的输入的特定值。
在Chrome和Firefox中进行了测试：
通过元素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的更新：使用此方法时，请注意此问题。
当您有更多输入字段时，可以使用onkeyup。假设您有四个或输入
document.getElementById('something').value，那么烦人。我们需要写4行来获取输入字段的值。
因此，您可以创建一个函数，该函数在keyup或keydown事件发生时将值存储在对象中。
范例：
<div class="container">
<div>
<label for="">Name</label>
<input type="text" name="fname" id="fname" onkeyup=handleInput(this)>
</div>
<div>
<label for="">Age</label>
<input type="number" name="age" id="age" onkeyup=handleInput(this)>
</div>
<div>
<label for="">Email</label>
<input type="text" name="email" id="email" onkeyup=handleInput(this)>
</div>
<div>
<label for="">Mobile</label>
<input type="number" name="mobile" id="number" onkeyup=handleInput(this)>
</div>
<div>
<button onclick=submitData()>Submit</button>
</div>
</div>javascript：
<script>
const data={ };
function handleInput(e){
data[e.name] = e.value;
}
function submitData(){
console.log(data.fname); //get first name from object
console.log(data); //return object
}
</script>如果您input在，form并且希望在提交后获得价值，可以这样做
<form onsubmit="submitLoginForm(event)">
<input type="text" name="name">
<input type="password" name="password">
<input type="submit" value="Login">
</form>
<script type="text/javascript">
function submitLoginForm(event){
event.preventDefault();
console.log(event.target['name'].value);
console.log(event.target['password'].value);
}
</script>这种方式的好处：例如，您的页面有2个 form输入sender和receiver信息。
如果您不使用form获取值，则
-您可以为每个字段设置2个不同的id（或tag或name...），如sender-name和receiver-name，sender-address和receiver-address，...-
如果为2个输入设置相同的值，则在之后getElementsByName（或getElementsByTagName.. 。）您需要记住0或1是sender或receiver。稍后，如果您更改formhtml 中2的顺序，则需要再次检查此代码
如果您使用的form，那么你就可以使用name，address...
<input id="new" >
<button onselect="myFunction()">it</button>
<script>
function myFunction() {
document.getElementById("new").value = "a";
}
</script>简单的js
function copytext(text) {
var textField = document.createElement('textarea');
textField.innerText = text;
document.body.appendChild(textField);
textField.select();
document.execCommand('copy');
textField.remove();
}如果您使用的是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的链接
您可以将此插件用于许多目的，例如获取表单的值，将值放入表单，表单的验证等等。您可以在项目的index.html文件中看到一些代码示例。
当然，我是该项目的作者，欢迎所有人改进它。