我正在使用 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;
注意：方法 2,3,4 和 6 返回元素的集合，因此使用 [whole_number] 来获取所需的出现次数。对于第一个元素，使用 [0]，对于第二个元素，使用1，依此类推...
方法二：
使用
document.getElementsByClassName('class_name')[whole_number].value返回 Live 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;选择，按类别
document.querySelector('input').value;选择，按标签
document.querySelector('[name="searchTxt"]').value;名称选择，按名称选择
方法六：
document.querySelectorAll('selector')[whole_number].value它也使用 CSS 选择器来选择元素，但它会将具有该选择器的所有元素作为静态节点列表返回。例如，
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;
因此，您将以特定形式获得确定输入的特定值。
<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>
您可以通过以下方式读取值searchTxt.value
function searchURL() {
let txt = searchTxt.value;
console.log(txt);
// window.location = "http://www.myurl.com/search/" + txt; ...
}
document.querySelector('.search').addEventListener("click", ()=>searchURL());<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>
<button class="search">Search</button>在 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 的更新：使用此方法时请注意此问题。
function handleValueChange() {
var y = document.getElementById('textbox_id').value;
var x = document.getElementById('result');
x.innerHTML = y;
}
function changeTextarea() {
var a = document.getElementById('text-area').value;
var b = document.getElementById('text-area-result');
b.innerHTML = a;
}input {
padding: 5px;
}
p {
white-space: pre;
}<input type="text" id="textbox_id" placeholder="Enter string here..." oninput="handleValueChange()">
<p id="result"></p>
<textarea name="" id="text-area" cols="20" rows="5" oninput="changeTextarea()"></textarea>
<p id="text-area-result"></p>如果你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或...），例如and ，and ，...
- 如果您为 2 个输入设置相同的值，则在（或.. .) 你需要记住 0 或 1 是或。后面如果在html中改变2的顺序，需要再次查看这段代码namesender-namereceiver-namesender-addressreceiver-addressgetElementsByNamegetElementsByTagNamesenderreceiverform
如果你使用form, 那么你可以使用name, address, ...
当您有更多输入字段时，您可以使用 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>
可以使用 form.elements 获取表单中的所有元素。如果一个元素有 id，它可以通过 .namedItem("id") 找到。例子：
var myForm = document.getElementById("form1");
var text = myForm.elements.namedItem("searchTxt").value;
var url = "http://www.myurl.com/search/" + text;
资料来源：w3schools
简单的js
function copytext(text) {
var textField = document.createElement('textarea');
textField.innerText = text;
document.body.appendChild(textField);
textField.select();
document.execCommand('copy');
textField.remove();
}
<input id="new" >
<button onselect="myFunction()">it</button>
<script>
function myFunction() {
document.getElementById("new").value = "a";
}
</script>
function searchURL() {
window.location = 'http://www.myurl.com/search/' + searchTxt.value
}
所以基本上searchTxt.value会返回输入字段的值id='searchTxt'。