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

Lihat ciri ini dalam codepen.

Terdapat beberapa cara untuk mendapatkan nilai kotak teks input secara langsung (tanpa membungkus elemen input di dalam elemen borang):

Kaedah 1

document.getElementById('textbox_id').value Dapatkan nilai kotak yang diperlukan

Sebagai contoh

document.getElementById("searchTxt").value;

Nota: Kaedah 2, 3, 4 dan 6 mengembalikan koleksi elemen, jadi gunakan [integer] untuk mendapatkan elemen yang diperlukan. Untuk elemen pertama, gunakan [0]，对于第二个元素，使用[1] dan seterusnya...

Kaedah 2

Digunakan document.getElementsByClassName('class_name')[整数].value, ia mengembalikan HTMLCollection secara langsung

Sebagai contoh

document.getElementsByClassName("searchField")[0].value; jika ini adalah kotak teks pertama pada halaman.

Kaedah 3

Gunakan document.getElementsByTagName('tag_name')[整数].value yang juga mengembalikan HTMLCollection secara langsung

Sebagai contoh

document.getElementsByTagName("input")[0].value; jika ini adalah kotak teks pertama pada halaman.

Kaedah 4

document.getElementsByName('name')[整数].value, ia juga mengembalikan NodeList

Sebagai contoh

document.getElementsByName("searchTxt")[0].value; jika ini adalah kotak teks pertama yang dinamakan 'teks carian' pada halaman.

Kaedah 5

Gunakan berkuasa document.querySelector('selector').value yang menggunakan pemilih CSS untuk memilih elemen

Sebagai contoh

• document.querySelector('#searchTxt').value; Pilih mengikut id
• document.querySelector('.searchField').value; Pilih mengikut kelas
• document.querySelector('input').value; Pilih mengikut nama tag
• document.querySelector('[name="searchTxt"]').value; Pilih mengikut nama

Kaedah 6

document.querySelectorAll('selector')[整数].value, Ia juga menggunakan pemilih CSS untuk memilih elemen, tetapi ia mengembalikan semua elemen dengan pemilih itu sebagai NodeList statik.

Sebagai contoh

• document.querySelectorAll('#searchTxt')[0].value; Pilih mengikut id
• document.querySelectorAll('.searchField')[0].value; Pilih mengikut kelas
• document.querySelectorAll('input')[0].value; Pilih mengikut nama tag
• document.querySelectorAll('[name="searchTxt"]')[0].value; Pilih mengikut nama

Sokongan