//创建一个监听器，当你按下一个键时触发
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;
  }
}

在codepen中查看此功能。

有多种方法可以直接获取输入文本框的值（而无需将输入元素包装在表单元素内）：

方法1

document.getElementById('textbox_id').value 获取所需框的值

例如

document.getElementById("searchTxt").value;

  注意：方法2、3、4和6返回一个元素集合，因此使用[整数]来获取所需的元素。对于第一个元素，使用[0]，对于第二个元素，使用[1]，依此类推...

方法2

使用document.getElementsByClassName('class_name')[整数].value，它返回一个实时的HTMLCollection

例如

document.getElementsByClassName("searchField")[0].value;，如果这是页面上的第一个文本框。

方法3

使用document.getElementsByTagName('tag_name')[整数].value，它也返回一个实时的HTMLCollection

例如

document.getElementsByTagName("input")[0].value;，如果这是页面上的第一个文本框。

方法4

document.getElementsByName('name')[整数].value，它也返回一个实时的NodeList

例如

document.getElementsByName("searchTxt")[0].value;，如果这是页面上的第一个名称为'searchtext'的文本框。

方法5

使用强大的document.querySelector('selector').value，它使用CSS选择器来选择元素

例如

• document.querySelector('#searchTxt').value; 通过id选择
• document.querySelector('.searchField').value; 通过class选择
• document.querySelector('input').value; 通过标签名选择
• document.querySelector('[name="searchTxt"]').value; 通过名称选择

方法6

document.querySelectorAll('selector')[整数].value，它也使用CSS选择器来选择元素，但它将所有具有该选择器的元素作为静态NodeList返回。

例如

• document.querySelectorAll('#searchTxt')[0].value; 通过id选择
• document.querySelectorAll('.searchField')[0].value; 通过class选择
• document.querySelectorAll('input')[0].value; 通过标签名选择
• document.querySelectorAll('[name="searchTxt"]')[0].value; 通过名称选择

支持