国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

JavaScript Tip: Get the value of a text input field
P粉283559033
P粉283559033 2023-08-21 10:35:51
0
2
504
<p>I'm using JavaScript to search. I want to use a form but it will break other things on my page. I have this input text field: </p> <pre class="brush:html;toolbar:false;"><input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField" /> </pre> <p>This is my JavaScript code: </p> <pre class="brush:js;toolbar:false;"><script type="text/javascript"> function searchURL(){ window.location = "http://www.myurl.com/search/" (input text value); } </script> </pre> <p>How to pass the value of a text field to JavaScript? </p>
P粉283559033
P粉283559033

reply all(2)
P粉814160988
//創(chuàng)建一個(gè)監(jiān)聽器,當(dāng)你按下一個(gè)鍵時(shí)觸發(fā)
window.onkeyup = keyup;

//創(chuàng)建一個(gè)全局的Javascript變量
var inputTextValue;

function keyup(e) {
  //將你的輸入文本設(shè)置為全局的Javascript變量,每次按鍵都會(huì)更新
  inputTextValue = e.target.value;

  //監(jiān)聽你按下回車鍵,此時(shí)你的網(wǎng)址將會(huì)改變?yōu)槟阍谒阉骺蛑休斎氲木W(wǎng)址
  if (e.keyCode == 13) {
    window.location = "http://www.myurl.com/search/" + inputTextValue;
  }
}

View this feature in codepen.

P粉828463673

There are several ways to get the value of the input text box directly (without wrapping the input element inside a form element):

method 1

document.getElementById('textbox_id').value Get the value of the required box

For example

document.getElementById("searchTxt").value;

Note: Methods 2, 3, 4 and 6 return a collection of elements, so use [integer] to get the required elements. For the first element, use [0], for the second element, use [1], and so on...

Method 2

Use document.getElementsByClassName('class_name')[integer].value, which returns a real-time HTMLCollection

For example

document.getElementsByClassName("searchField")[0].value;, if this is the first text box on the page.

Method 3

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

For example

document.getElementsByTagName("input")[0].value;, if this is the first text box on the page.

Method 4

document.getElementsByName('name')[integer].value, it also returns a real-time NodeList

For example

document.getElementsByName("searchTxt")[0].value;, if this is the first text box named 'searchtext' on the page.

Method 5

Use the powerful document.querySelector('selector').value, which uses CSS selectors to select elements

For example

  • document.querySelector('#searchTxt').value; Select by id
  • document.querySelector('.searchField').value; Select by class
  • document.querySelector('input').value; Select by tag name
  • document.querySelector('[name="searchTxt"]').value; Select by name

Method 6

document.querySelectorAll('selector')[integer].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; Select by id
  • document.querySelectorAll('.searchField')[0].value; Select by class
  • document.querySelectorAll('input')[0].value; Select by tag name
  • document.querySelectorAll('[name="searchTxt"]')[0].value; Select by name

support

Browser method 1 Method 2 Method 3 Method 4 Method 5/6
IE6 Y(problem) N Y Y(problem) N
IE7 Y(problem) N Y Y(problem) N
IE8 Y N Y Y(problem) Y
IE9 Y Y Y Y(problem) 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(problem) Y
Opera10.60
Opera 12 Y Y Y Y Y
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template