javascript - Dom - 如何使用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如何从文本字段获取值?

时间:

有多种方法可以直接获取输入文本框值(不用将input放到在form里):

方法 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返回一个Live 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;由tagname选定
document.querySelector('[name="searchTxt"]').value;按名称选择

方法6:

document.querySelectorAll('selector')[whole_number].value它也使用CSS选择器来选择元素,但是它将所有带有选择器的元素作为静态节点返回。

比如 document.querySelectorAll('#searchTxt')[0].value;按id选择
document.querySelectorAll('.searchField')[0].value;按类别选择
document.querySelectorAll('input')[0].value;由tagname选定
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




//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的最低理解即可完成、改进和编辑。

试试这个


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



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


<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();


}



...