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

2020/09/19 19:01 · javascript ·  · 0评论

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

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

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

您应该可以输入:

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

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

试试这个

<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在,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输入senderreceiver信息。

如果您不使用form获取值,则

-您可以
为每个字段设置2个不同的值
id(或tagname...),如sender-namereceiver-namesender-addressreceiver-address,...-

如果为2个输入设置相同的值,则在值之后
getElementsByName(或getElementsByTagName.. 。)您需要记住0或1是senderreceiver稍后,如果您form在html中更改2的顺序,则需要再次检查此代码

如果您使用的form,那么你就可以使用nameaddress...

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

简单的js

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

您可以通过读取值

searchTxt.value

更新

我看到很多反对意见,但有任何评论-但是(对于将来的读者)实际上此解决方案有效

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

当然,我是该项目的作者,欢迎所有人改进它。

本文地址:http://javascript.askforanswer.com/ruheshiyongjavascripthuoquwenbenshuruziduandezhi.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!