我正在使用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中？
有多种方法可以直接获取输入文本框的值（而不包装在表单元素内）：
document.getElementById('textbox_id').value 获取所需文本框的值
document.getElementById("searchTxt").value;
注意：方法二、三、四和六返回一个元素集合，因此使用[整数]来获取所需的出现次数。 对于第一个元素，使用[0]，
对于第二个元素，请使用[1]，依此类推...
使用 document.getElementsByClassName('class_name')[whole_number].value，该方法返回一个活动的 HTMLCollection
document.getElementsByClassName("searchField")[0].value; 如果这是页面中的第一个文本框，则使用此方法。
使用document.getElementsByTagName('tag_name')[whole_number].value，该方法也返回一个活动的HTMLCollection
document.getElementsByTagName("input")[0].value; 如果这是页面中的第一个文本框，则使用此方法。
document.getElementsByName('name')[whole_number].value，该方法也返回一个活动的NodeList
document.getElementsByName("searchTxt")[0].value; 如果这是页面中第一个带名称“searchtext”的文本框，则使用此方法。
使用强大的document.querySelector('selector').value，该方法使用CSS选择器选择元素
document.querySelector('#searchTxt').value; 通过id选择document.querySelector('.searchField').value; 通过class选择document.querySelector('input').value; 通过标签名选择元素document.querySelector('[name="searchTxt"]').value; 通过名称选择元素document.querySelectorAll('选择器')[整数].value 同样使用CSS选择器来选取元素，但它返回包含所有符合选择器的静态节点列表。
document.querySelectorAll('#searchTxt')[0].value; 通过ID选择元素document.querySelectorAll('.searchField')[0].value; 通过类选择元素document.querySelectorAll('input')[0].value; 通过标签名选择元素document.querySelectorAll('[name="searchTxt"]')[0].value; 通过名称选择元素支持性
| 浏览器 | 方法1 | 方法2 | 方法3 | 方法4 | 方法5/6 |
|---|---|---|---|---|---|
| IE6 | Y(有错) | N | Y | Y(有错) | N |
| IE7 | Y(有错) | N | Y | Y(有错) | N |
| IE8 | Y | N | Y | Y(有错) | Y |
| IE9 | Y | Y | Y | Y(有错) | Y |
| IE10 | Y | Y | Y | Y | Y |
| FF3.0 | 支持 | 支持 | 支持 | 支持 | 不支持 IE=Internet Explorer |
| FF3.5/FF3.6 | 支持 | 支持 | 支持 | 支持 | 支持 FF=Mozilla Firefox |
| FF4b1 | 支持 | 支持 | 支持 | 支持 | 支持 GC=Google Chrome |
| GC4/GC5 | 支持 | 支持 | 支持 | 支持 | 支持 Y=YES,N=NO |
| Safari4/Safari5 | 支持 | 支持 | 支持 | 支持 | 支持 |
| Opera10.10/ | |||||
| Opera10.53/ | 支持 | 支持 | 支持 | 支持(有Bug) | 支持 |
| Opera10.60 | |||||
| Opera 12 | 支持 | 支持 | 支持 | 支持 | 支持 |
有用的链接
//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;
然后我会使用这个变量将输入的值添加到字符串中。
= "你的字符串" + 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; 这样，您将获得特定表单中特定输入的具体值。
您可以通过searchTxt.value来读取值。
<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>
<script type="text/javascript">
function searchURL(){
console.log(searchTxt.value);
// window.location = "http://www.myurl.com/search/" + searchTxt.value;
}
</script>
<!-- SHORT ugly test code -->
<button class="search" onclick="searchURL()">Search</button>如果你的 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个表单用于输入发送者和接收者信息。
如果您不使用表单获取值，则可以
id（或标签或名称...），如sender-name和receiver-name，sender-address和receiver-address...getElementsByName（或getElementsByTagName...）之后记住0或1是sender还是receiver。稍后，如果您更改HTML中2个表单的顺序，则需要再次检查此代码如果您使用表单，则可以使用名称，地址等。
document.getElementById('something').value很麻烦。我们需要编写四行代码来获取输入字段的值。<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 the first name from the object
console.log(data); // return object
}
</script>
<input type="text" onkeyup="trackChange(this.value)" id="myInput">
<script>
function trackChange(value) {
window.open("http://www.google.com/search?output=search&q=" + value)
}
</script>
在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>
点击此链接查看示例代码。
另外，您也可以查看JavaScript计算器实现。
来自@bugwheels94的提示：使用此方法时，请注意此问题。
document.getElementByID("<%=searchTxt.ClientID %>").value也是有效的，当document.getElementByID("searchText").value失效时，我已经使用过它。 - Amicable