Bagaimanakah Saya Boleh Mendapatkan Nilai Medan Input Teks Menggunakan JavaScript?

Bagaimanakah Saya Boleh Mendapatkan Nilai Medan Input Teks Menggunakan JavaScript?

Dalam senario di mana unsur bentuk boleh mengganggu aspek lain halaman web, mendapatkan teks input nilai medan secara langsung menjadi perlu. JavaScript menawarkan beberapa kaedah untuk mencapai ini:

Kaedah 1: document.getElementById

document.getElementById('searchTxt').value;

Kaedah ini mendapatkan semula nilai medan input dengan IDnya.

Kaedah 2: document.getElementsByClassName

document.getElementsByClassName('searchField')[0].value;

Kaedah ini memilih semua medan input dengan kelas tertentu dan mengembalikan HTMLCollection. Gunakan [0] untuk mengakses elemen pertama (jika terdapat berbilang elemen).

Kaedah 3: document.getElementsByTagName

document.getElementsByTagName('input')[0].value;

Kaedah ini memilih semua elemen input pada halaman dan mengembalikan HTMLCollection. Sekali lagi, gunakan [0] untuk elemen pertama.

Kaedah 4: document.getElementsByName

document.getElementsByName('searchTxt')[0].value;

Kaedah ini mendapatkan semula semua medan input dengan nama tertentu. Gunakan [0] untuk kejadian pertama.

Kaedah 5: document.querySelector

document.querySelector('#searchTxt').value;
document.querySelector('.searchField').value;

Kaedah ini menggunakan pemilih CSS untuk memilih elemen, membolehkan perolehan semula disasarkan.

Kaedah 6: document.querySelectorAll

document.querySelectorAll('#searchTxt')[0].value;
document.querySelectorAll('.searchField')[0].value;

Sama seperti document.querySelector, kaedah ini menggunakan pemilih CSS tetapi mengembalikan NodeList bagi semua elemen padanan. Gunakan [0] untuk elemen pertama.

Sokongan Penyemak Imbas

Jadual di bawah menunjukkan tahap sokongan untuk kaedah ini dalam penyemak imbas yang berbeza:

Browser	Method 1	Method 2	Method 3	Method 4	Method 5/6
IE6	Y(Buggy)	N	Y	Y(Buggy)	N
IE7	Y(Buggy)	N	Y	Y(Buggy)	N
IE8	Y	N	Y	Y(Buggy)	Y
IE9	Y	Y	Y	Y(Buggy)	Y
IE10	Y	Y	Y	Y	Y
FF3.0	Y	Y	Y	Y	N
FF3.5/FF3.6	Y	Y	Y	Y	Y
FF4b1	Y	Y	Y	Y	Y
GC4/GC5	Y	Y	Y	Y	Y
Safari4/Safari5	Y	Y	Y	Y	Y
Opera10.10/	Y	Y	Y	Y(Buggy)	Y
Opera10.53/	Y	Y	Y	Y	Y
Opera10.60	Y	Y	Y	Y	Y
Opera 12	Y	Y	Y	Y	Y

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mendapatkan Nilai Medan Input Teks Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!