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


How do I get the value of text input field using JavaScript?

我正在用javascript进行搜索。我会使用表单，但它会弄乱我页面上的其他内容。我有这个输入文本字段：

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

这是我的javascript代码：

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

号

如何将文本字段中的值转换为javascript？

有多种方法可以直接获取输入文本框值(不将输入元素包装在表单元素中)：

方法1：

document.getElementById('textbox_id').value to get the value of
desired box

For example, document.getElementById("searchTxt").value;

号

nbsp；

Note: Method 2,3,4 and 6 returns a collection of elements, so use [whole_number] to get the desired occurrence. For the first element, use [0],
for the second one use 1, and so on...

号

方法2：

Use
document.getElementsByClassName('class_name')[whole_number].value which returns a Live HTMLCollection

For example, document.getElementsByClassName("searchField")[0].value; if this is the first textbox in your page.

号

方法3：

Use document.getElementsByTagName('tag_name')[whole_number].value which also returns a live HTMLCollection

For example, document.getElementsByTagName("input")[0].value;, if this is the first textbox in your page.

号

方法4：

document.getElementsByName('name')[whole_number].value which also >returns a live NodeList

For example, document.getElementsByName("searchTxt")[0].value; if this is the first textbox with name 'searchtext' in your page.

号

方法5：

Use the powerful document.querySelector('selector').value which uses a CSS selector to select the element

For example, document.querySelector('#searchTxt').value; selected by id
document.querySelector('.searchField').value; selected by class
document.querySelector('input').value; selected by tagname
document.querySelector('[name="searchTxt"]').value; selected by name

号

方法6：

document.querySelectorAll('selector')[whole_number].value which also uses a CSS selector to select elements, but it returns all elements with that selector as a static Nodelist.

For example, document.querySelectorAll('#searchTxt')[0].value; selected by id
document.querySelectorAll('.searchField')[0].value; selected by class
document.querySelectorAll('input')[0].value; selected by tagname
document.querySelectorAll('[name="searchTxt"]')[0].value; selected by name

号

支持

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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之间的区别单击此处
    • 相关讨论

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    //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中查看此功能。

    相关讨论

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

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

    。

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

    江户十一〔一〕号

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

    相关讨论

    您应该能够键入：

    1
    2
    3
    4
    5
    var input = document.getElementById("searchTxt");

    function searchURL() {
         window.location ="http://www.myurl.com/search/" + input.value;
    }
    1
    <input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>

    。

    我确信有更好的方法可以做到这一点，但这一方法似乎适用于所有的浏览器，而且它只需要对javascript的最低理解即可完成、改进和编辑。

    试试这个

    1
    2
    3
    4
    5
    <input type="text" onkeyup="trackChange(this.value)" id="myInput">

    function trackChange(value) {
        window.open("http://www.google.com/search?output=search&q=" + value)
    }

    号

    在Chrome和Firefox中测试：

    按元素ID获取值：

    1
    2
    <input type="text" maxlength="512" id="searchTxt" class="searchField"/>
    <input type="button" value="Get Value" onclick="alert(searchTxt.value)">

    在表单元素中设置值：

    1
    2
    3
    4
    <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，则可以使用.nameditm("ID")找到它。例子：

    1
    2
    3
    var myForm = document.getElementById("form1");
    var text = myForm.elements.namedItem("searchTxt").value;
    var url ="http://www.myurl.com/search/" + text;

    号

    资料来源：W3学校

    简单JS

    1
    2
    3
    4
    5
    6
    7
    8
    function copytext(text) {
        var textField = document.createElement('textarea');
        textField.innerText = text;
        document.body.appendChild(textField);
        textField.select();
        document.execCommand('copy');
        textField.remove();
    }

    号

    当您有更多的输入字段时，可以使用onkeyup。假设您有四个或输入。document.getElementById('something').value很烦人。我们需要写4行来获取输入字段的值。

    所以，您可以创建一个函数，在keyup或keydown事件中存储对象中的值。

    例子：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
            <label for="">Name</label>
            <input type="text" name="fname" id="fname" onkeyup=handleInput(this)>
       
       
            <label for="">Age</label>
            <input type="number" name="age" id="age" onkeyup=handleInput(this)>
       
       
            <label for="">Email</label>
            <input type="text" name="email" id="email" onkeyup=handleInput(this)>
       
       
            <label for="">Mobile</label>
            <input type="number" name="mobile" id="number" onkeyup=handleInput(this)>
       
       
            <button onclick=submitData()>Submit</button>

    号

    javascript：

    1
    2
    3
    4
    5
    6
    7
    8
        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
        }

    号

    1
    2
    3
    4
    5
    6
    <input id="new">
        <button  onselect="myFunction()">it</button>    
       
            function myFunction() {
                document.getElementById("new").value ="a";    
            }

    号

    如果您使用jquery，那么通过使用plugin forminteract，您只需执行以下操作：

    1
    2
    3
    // Just keep the HTML as it is.

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

    。

    在页面底部，只需包含此插件文件并编写以下代码：

    1
    2
    3
    4
    5
    6
    // 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，则使用以下命令：

    1
    2
    3
    $.get("http://www.myurl.com/search/"+search.get().searchTxt, {}, function(rsp){
        // Now do work with your response;
    })

    以下是到项目https://bitback.org/ranjeet1985/forminteract的链接

    您可以将此插件用于许多目的，例如获取表单的值、将值放入表单、验证表单等等。您可以在项目的index.html文件中看到一些代码示例。

    当然，我是这个项目的作者，欢迎大家把它做得更好。

    相关讨论