如何使用JavaScript获取文本输入字段的值？-Java 学习之路

681

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

11 回答

试试这个

<input type="text" onKeyup="trackChange(this.value)" id="myInput">
<script>
function trackChange(value)
{

window.open("http://www.google.co.in/search?output=search&q="+value)

}
</script>

回复于 2024-04-29T06:33:42+08:00

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

回复于 2024-04-29T06:33:42+08:00

你应该能够输入：

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

<script>
    var input = document.getElementById("searchTxt");

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

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

回复于 2024-04-29T06:33:42+08:00

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

因此，您可以创建一个在keyup或keydown事件中将值存储在object中的函数 .

示例：

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

回复于 2024-04-29T06:33:42+08:00

13

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

回复于 2024-04-29T06:33:42+08:00
0
我会创建一个变量来存储输入，如下所示：
```
var input = document.getElementById("input_id").value;
```
然后我会使用变量将输入值添加到字符串中 .

= "Your string" + input;
回复于 2024-04-29T06:33:42+08:00
1
在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 .
回复于 2024-04-29T06:33:42+08:00
1446
可以使用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
回复于 2024-04-29T06:33:42+08:00
7
如果你使用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文件中看到一些代码示例 .

当然我是这个项目的作者，欢迎所有人改进它 .
回复于 2024-04-29T06:33:42+08:00

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

回复于 2024-04-29T06:33:42+08:00

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

Method 1:

document.getElementById（'textbox_id'） . value获取所需框的值例如，document.getElementById（“searchTxt”） . value;

注意：方法2,3,4和6返回元素集合，因此使用[whole_number]来获取所需的元素 . 对于第一个元素，使用[0]，对于第二个元素使用1，依此类推......

Method 2:

使用document.getElementsByClassName（'class_name'）[whole_number] .value返回一个Live HTMLCollection例如，document.getElementsByClassName（“searchField”）[0] .value;如果这是您页面中的第一个文本框 .

Method 3:

使用document.getElementsByTagName（'tag_name'）[whole_number] .value，它还返回一个实时HTMLCollection例如，document.getElementsByTagName（“input”）[0] .value;，如果这是您页面中的第一个文本框 .

Method 4:

document.getElementsByName（'name'）[whole_number] .value，它还返回一个实时NodeList例如，document.getElementsByName（“searchTxt”）[0] .value;如果这是您的页面中第一个名为“searchtext”的文本框 .

Method 5:

使用功能强大的document.querySelector（'selector'） . value，它使用CSS选择器来选择元素 . 例如，document.querySelector（'＃searchTxt'） . value;由id document.querySelector（' . searchField'） . value选择由类document.querySelector（'input'）选择.value;由标记名document.querySelector（'[name =“searchTxt”]'） . 值选择 . 按名称选择

Method 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
```
Useful links
回复于 2024-04-29T06:33:42+08:00

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

11 回答

相关问题