//创建一个监听器，当你按下一个键时触发 window.onkeyup = keyup; //创建一个全局的Javascript变量 var inputTextValue; function keyup(e) { //将你的输入文本设置为全局的Javascript变量，每次按键都会更新 inputTextValue = e.target.value; //监听你按下回车键，此时你的网址将会改变为你在搜索框中输入的网址 if (e.keyCode == 13) { window.location = "http://www.myurl.com/search/" + inputTextValue; } }

View this feature in codepen.

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').valueGet 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

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

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