Petua JavaScript: Dapatkan nilai medan input teks

Question

Saya menggunakan JavaScript untuk mencari. Saya mahu menggunakan borang tetapi ia akan memecahkan perkara lain pada halaman saya. Saya mempunyai medan teks input ini:

Ini ialah kod JavaScript saya: 

Answer 1

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

Answer 2

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

secara langsung

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

Pelayar	Kaedah 1	Kaedah 2	Kaedah 3	Kaedah 4	Kaedah 5/6
IE6	Y(soalan)	N	Y	Y(soalan)	N
IE7	Y(soalan)	N	Y	Y(soalan)	N
IE8	Y	N	Y	Y(soalan)	Y
IE9	Y	Y	Y	Y(soalan)	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=YA,N=NO
Safari4/Safari5	Y	Y	Y	Y	Y
Opera10.10/
Opera10.53/	Y	Y	Y	Y(soalan)	Y
Opera10.60
Opera 12	Y	Y	Y	Y	Y