【问题标题】：如何使用 JavaScript 获取文本输入字段的值？
【发布时间】：2012-07-18 19:16:02
【问题描述】：

我正在使用 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？

【问题讨论】：

标签： javascript dom html-input

【解决方案1】：

有多种方法可以直接获取输入文本框值（无需将输入元素包装在表单元素中）：

方法一：

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

有用的链接

【讨论】：

IE8 supports QSA 据我所知，它只是不支持选择器字符串中的 CSS3 选择器。
@FabrícioMatté 我刚刚检查过这里quirksmode.org/dom/tests/basics.html#querySelectorAll 它告诉我它没有
非常有用的文档，保存以供参考。谢谢。
@GKislin 啊！我知道了。很高兴我不知道。但是在阅读this 之后，我现在不愿意将此编辑添加到答案中。也许有一天，我会添加一个警告以避免它。警告的所有原因之一是this。如果你觉得它真的很好，那么要么用警告进行编辑，要么根据你的意愿添加另一个答案:)
@calyxofheld 使用 forEach 或 for 循环所有这些。这是JS中非常基本的东西。如果没有，您是否简要地浏览过 JS？那么我会建议你先通过它。继续学习

【解决方案2】：

//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;
  }
}

See this functioning in codepen.

【讨论】：

虽然我很欣赏接受的答案的完整性，但我发现这个答案很有用：在 JS 代码中访问在 DOM 文本输入元素（文本框）中输入的值。有关详细信息，请参阅本问题其他地方的我的回答。

【解决方案3】：

我会创建一个变量来存储这样的输入：

var input = document.getElementById("input_id").value;

然后我将只使用该变量将输入值添加到字符串中。

= "Your string" + input;

【讨论】：

如果您希望它是一个正确的 javascript 对象，以便您可以通过编程方式访问每个属性，只需执行以下操作： var input = JSON.parse(document.getElementById("input_id").value);
简单直接的答案！！

【解决方案4】：

你应该可以输入：

var input = document.getElementById("searchTxt");

function searchURL() {
     window.location = "http://www.myurl.com/search/" + input.value;
}

&lt;input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/&gt;

我确信有更好的方法可以做到这一点，但这个方法似乎适用于所有浏览器，并且它需要对 JavaScript 的了解最少才能制作、改进和编辑。

【讨论】：

【解决方案5】：

您也可以通过标签名称调用，如下所示：form_name.input_name.value; 因此，您将具有特定形式的确定输入的特定值。

【讨论】：

是的！我很惊讶这种简单性。看看简单计算器的实现4stud.info/web-programming/samples/dhtml-calculator.html 这个javascript功能有没有参考，因为我之前总是使用jQuery或getElementById

【解决方案6】：

<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>

【讨论】：

【解决方案7】：

短

您可以通过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>

【讨论】：

编辑没问题；对downvotes 的评论不属于帖子。请不要在帖子解锁时回滚

【解决方案8】：

在 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 的更新：使用此方法时请注意this issue。

【讨论】：

【解决方案9】：

如果您的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 获取价值，那么
- 您可以为sender-name 和receiver-name、sender-address 和receiver-address、...
- 如果您为 2 个输入设置相同的值，那么在 getElementsByName（或 getElementsByTagName ...）之后，您需要记住 0 或 1 是 sender 或 receiver。以后如果你在html中改变了2个form的顺序，你需要再次检查这段代码

如果你使用form，那么你可以使用name, address, ...

【讨论】：

【解决方案10】：

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>

【讨论】：

【解决方案11】：

可以使用 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

【讨论】：

【解决方案12】：

当您有更多输入字段时，您可以使用 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>

【讨论】：

【解决方案13】：

<input id="new" >
    <button  onselect="myFunction()">it</button>    
    <script>
        function myFunction() {
            document.getElementById("new").value = "a";    
        }
    </script>

【讨论】：

【解决方案14】：

简单的js

function copytext(text) {
    var textField = document.createElement('textarea');
    textField.innerText = text;
    document.body.appendChild(textField);
    textField.select();
    document.execCommand('copy');
    textField.remove();
}

【讨论】：

【解决方案15】：

function searchURL() {
   window.location = 'http://www.myurl.com/search/' + searchTxt.value
}

所以基本上searchTxt.value 将返回带有id='searchTxt' 的输入字段的值。

【讨论】：