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

I am working on a search with JavaScript. I would use a form, but it messes up something else on my page. I have this input text field:

我正在用JavaScript进行搜索。我想用一个表单，但是它把我页面上的其他东西弄乱了。我有这个输入文本字段:

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

And this is my JavaScript code:

这是我的JavaScript代码:

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

How do I get the value from the text field into JavaScript?

如何将文本字段中的值转换为JavaScript?

9 个解决方案

#1

There are various methods to get an input textbox value directly (without wrapping the input element inside a form element):

有各种方法可以直接获取输入文本框值(无需将输入元素封装在表单元素中):

Method 1:

方法1:

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

. getelementbyid(“textbox_id”)。值以获取所需框的值

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

例如,. getelementbyid(“searchTxt”)value;

 

 

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、3、4和6返回一个元素集合，因此使用[whole_number]获得所需的结果。对于第一个元素，使用[0]，对于第二个元素，使用1，等等……

Method 2:

方法2:

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

使用document.getElementsByClassName(class_name)[whole_number]。返回一个实时HTMLCollection的值

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

例如,document.getElementsByClassName(“searchField”)[0]value;如果这是页面中的第一个文本框。

Method 3:

方法3:

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

使用document.getElementsByTagName(tag_name)[whole_number]。值，该值还返回一个有效的HTMLCollection

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

例如，document.getElementsByTagName(“input”)[0].value;

Method 4:

方法4:

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

document.getElementsByName(“名字”)[whole_number]。该值还返回一个活动的节点列表

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

例如,document.getElementsByName(“searchTxt”)[0]value;如果这是第一个在你的页面中有名字“searchtext”的文本框。

Method 5:

方法5:

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

使用强大的document.querySelector(“选择器”)。使用CSS选择器选择元素的值。

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

例如,document.querySelector(# searchTxt)value;选择id document.querySelector(.searchField)value;选择类document.querySelector value(“输入”);选择tagname document.querySelector([name = " searchTxt "])value;选择的名字

Method 6:

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

document.querySelectorAll(“选择器”)[whole_number]。值，它也使用CSS选择器来选择元素，但它返回所有元素，并使用该选择器作为静态的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

例如,document.querySelectorAll(# searchTxt)[0]value;选择id document.querySelectorAll(.searchField)[0]value;选择类document.querySelectorAll(“输入”)[0]value;选择tagname document.querySelectorAll(“[name = " searchTxt]”)[0]value;选择的名字

Support

支持

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

有用的链接

1. To see the support of these methods with all the bugs including more details click here
2. 要查看这些方法的支持，包括更多的细节，请点击这里。
3. Difference Between Static collections and Live collections click Here
4. 静态集合和活动集合之间的区别请点击这里
5. Difference Between NodeList and HTMLCollection click Here
6. 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;
  }
}

See this functioning in codepen.

请参见codepen中的功能。

#3

I would create a variable to store the input like this:

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

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

And then I would just use the variable to add the input value to the string.

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

= "Your string" + input;

=“您的字符串”+输入;

#4

Also you can, call by tags names, like this: form_name.input_name.value; So you will have the specific value of determined input in a specific form.

也可以通过标记名调用，比如:form_name.input_name.value;所以你将会有一个特定形式的确定输入的特定值。

#5

You should be able to type:

您应该能够输入:

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

I'm sure there are better ways to do this, but this one seems to work across all browsers, and it requires minimal understanding of JavaScript to make, improve, and edit.

我确信有更好的方法来实现这一点，但是这个方法似乎在所有的浏览器中都能实现，并且它需要对JavaScript的理解、改进和编辑。

#6

Try this one

试试这个

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

#7

Tested in Chrome and Firefox:

在Chrome和Firefox中测试:

Get value by element id:

通过元素id获取值:

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

Set value in form element:

表单元素中的设置值:

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

https://jsfiddle.net/tuq79821/

Also have a look at a JavaScript calculator implementation: http://www.4stud.info/web-programming/samples/dhtml-calculator.html

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

UPDATE from @bugwheels94: when using this method be aware of this issue.

从@bugwheels94更新:当使用此方法时，请注意这个问题。

#8

If you are using jQuery then by using plugin formInteract, you just need to do this:

如果你使用jQuery，那么使用formInteract插件，你只需要这样做:

// Just keep the HTML as it is.

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

At bottom of the page just include this plugin file and write this code:

在页面的底部包含这个插件文件，并编写以下代码:

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

Or if using a parameterized URL then use this:

或者，如果使用参数化URL，则使用以下方法:

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

Here is the link to project https://bitbucket.org/ranjeet1985/forminteract

下面是项目https://bitbucket.org/ranjeet1985/forminteract的链接

You can use this plugin for many purposes like getting the value of a form, putting values into a form, validation of forms and many more. You can see some example of code in the index.html file of the project.

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

Of course I am the author of this project and all are welcome to make it better.

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

#9

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