如何使用JavaScript获取文本输入字段的值？

<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>

<script type="text/javascript">
  function searchURL(){
    window.location = "http://www.myurl.com/search/" + (input text value);
  }
</script>

#1 楼

有多种方法可直接获取输入文本框值（不将输入元素包装在表单元素内）：方法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;是第一个名称为textbox的文本框页面中的“搜索文字”。


方法5：


使用功能强大的document.querySelector('selector').value，该功能使用CSS选择器选择元素

例如，由id选择的document.querySelector('#searchTxt').value;由类选择的document.querySelector('.searchField').value;由标记名选择的document.querySelector('input').value;由标记名选择的document.querySelector('[name="searchTxt"]').value;由名称选择的


方法6：



document.querySelectorAll('selector')[whole_number].value，它也使用CS S选择器来选择元素，但它返回该选择器作为静态Nodelist的所有元素。

例如，由id选择的document.querySelectorAll('#searchTxt')[0].value;由类选择的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
 

有用的链接


要查看这些方法的支持以及所有错误（包括更多详细信息），请单击此处
静态集合与实时集合之间的区别请单击此处
NodeList和HTMLCollection之间的区别请单击此处

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

请参见Codepen中的此功能。

#3 楼

我将创建一个变量来存储输入，例如：

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

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

= "Your string" + input;

#4 楼

您应该可以输入：

 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的理解，编写，改进和编辑需要最少的了解。 br />

#5 楼

同样，您也可以按标签名称进行调用，例如：form_name.input_name.value;
，这样您将以特定的形式获得确定的输入的特定值。

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

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

#8 楼

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

如果使用form，则可以使用name，address，...

#9 楼

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

#10 楼

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

#11 楼

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

#12 楼

简单的js

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

#13 楼

您可以通过

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> 

更新
我看到了很多反对意见，但有任何评论-但是（对于将来的读者）这种解决方案实际上是有效的

#14 楼

如果您使用的是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文件中看到一些代码示例。

当然，我是该项目的作者，欢迎所有人对其进行改进。