如何使用 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:

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

有用的链接

  1. 要查看所有错误(包括更多详细信息)对这些方法的支持,请单击此处。
  2. 静态集合和实时集合之间的区别请单击此处
  3. NodeList 和 HTMLCollection 之间的区别请单击此处
//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 中的此功能。

我将创建一个变量来存储输入,如下所示:

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

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

= "Your string" + input;

您也可以按标签名称进行调用,如下所示: form_name.input_name.value;因此,您将以特定形式获得确定的输入的特定值。

您应该可以输入:

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 的理解,编写,改进和编辑都需要极少的了解。

试试这个

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

https://jsfiddle.net/tuq79821/

还可以查看 JavaScript 计算器的实现: http : //www.4stud.info/web-programming/samples/dhtml-calculator.html

@ bugwheels94 的更新:使用此方法时,请注意此问题

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

当您有更多输入字段时,可以使用 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 id="new" >
    <button  onselect="myFunction()">it</button>    
    <script>
        function myFunction() {
            document.getElementById("new").value = "a";    
        }
    </script>