i) Jika Anda menggunakan skrip dalam tindakan klien apa pun, tetapkan satu parameter Keluaran untuk skrip dengan nilai masing-masing yang ditetapkan, dan tetapkan parameter Keluaran itu ke variabel lokal pada langkah berikutnya
ii) Jika Anda meneruskan nilai dari blok web menggunakan peristiwa pemicu, Di pengendali peristiwa layar, tetapkan variabel lokal dengan nilai
Misalnya, saat kami mengetik di bidang teks di bawah – tidak ada acara. Tetapi ketika kita memindahkan fokus ke tempat lain, misalnya, mengklik tombol – akan ada acara change
<input type="text" onchange="alert(this.value)"> <input type="button" value="Button">
Untuk elemen lainnya. select, input type=checkbox/radio dipicu tepat setelah pilihan berubah
<select onchange="alert(this.value)"> <option value="">Select something</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select>_
Peristiwa input_ dipicu setiap kali setelah nilai diubah oleh pengguna
Tidak seperti peristiwa keyboard, ini memicu perubahan nilai apa pun, bahkan yang tidak melibatkan tindakan keyboard. menempel dengan mouse atau menggunakan pengenalan suara untuk mendikte teks
Contohnya
<input type="text" id="input"> oninput: <span id="result"></span> <script> input.oninput = function() { result.innerHTML = input.value; }; </script>
Jika kita ingin menangani setiap modifikasi <input> maka acara ini adalah pilihan terbaik
Di sisi lain, peristiwa input_ tidak memicu input keyboard dan tindakan lain yang tidak melibatkan perubahan nilai, mis. g. menekan tombol panah ⇦ ⇨ saat di input
Tidak dapat mencegah apa pun di <select onchange="alert(this.value)"> <option value="">Select something</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select>_1
Peristiwa input terjadi setelah nilai diubah
Jadi kita tidak bisa menggunakan <select onchange="alert(this.value)"> <option value="">Select something</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select>_3 di sana – sudah terlambat, tidak akan ada efeknya
Peristiwa ini terjadi saat memotong/menyalin/menempelkan nilai
Mereka milik kelas dan memberikan akses ke data yang dipotong/disalin/ditempelkan
Kami juga dapat menggunakan <select onchange="alert(this.value)"> <option value="">Select something</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select>3 untuk membatalkan tindakan, lalu tidak ada yang disalin/ditempel
Misalnya, kode di bawah ini mencegah semua peristiwa <select onchange="alert(this.value)"> <option value="">Select something</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select>5 dan menunjukkan teks yang ingin kita potong/salin/tempel
<input type="text" id="input"> <script> input.onpaste = function(event) { alert("paste: " + event.clipboardData.getData('text/plain')); event.preventDefault(); }; input.oncut = input.oncopy = function(event) { alert(event.type + '-' + document.getSelection()); event.preventDefault(); }; </script>
Tolong dicatat. di dalam <select onchange="alert(this.value)"> <option value="">Select something</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select>_6 dan <select onchange="alert(this.value)"> <option value="">Select something</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select>7 event handler panggilan ke <select onchange="alert(this.value)"> <option value="">Select something</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select>8 mengembalikan string kosong. Itu karena secara teknis datanya belum ada di clipboard. Jika kami menggunakan <select onchange="alert(this.value)"> <option value="">Select something</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select>_3 itu tidak akan disalin sama sekali
Jadi contoh di atas menggunakan <input type="text" id="input"> oninput: <span id="result"></span> <script> input.oninput = function() { result.innerHTML = input.value; }; </script>_0 untuk mendapatkan teks yang dipilih. Anda dapat menemukan detail selengkapnya tentang pemilihan dokumen di artikel Pemilihan dan Jangkauan
Anda dapat menyalin/menempel bukan hanya teks, tetapi semuanya. Misalnya, kita dapat menyalin file di pengelola file OS, dan menempelkannya
Itu karena <input type="text" id="input"> oninput: <span id="result"></span> <script> input.oninput = function() { result.innerHTML = input.value; }; </script>1 mengimplementasikan antarmuka <input type="text" id="input"> oninput: <span id="result"></span> <script> input.oninput = function() { result.innerHTML = input.value; }; </script>2, biasanya digunakan untuk drag'n'drop dan copy/paste. Ini sedikit di luar jangkauan kami sekarang, tetapi Anda dapat menemukan metodenya di
Selain itu, ada API asinkron tambahan untuk mengakses clipboard. <input type="text" id="input"> oninput: <span id="result"></span> <script> input.oninput = function() { result.innerHTML = input.value; }; </script>_3. Lebih lanjut tentang itu di spesifikasi Clipboard API and events, tidak didukung oleh Firefox
Clipboard adalah hal tingkat OS "global". Seorang pengguna dapat beralih di antara berbagai aplikasi, menyalin/menempel berbagai hal, dan halaman browser seharusnya tidak melihat semua itu
Jadi sebagian besar browser mengizinkan akses baca/tulis tanpa batas ke clipboard hanya dalam lingkup tindakan pengguna tertentu, seperti menyalin/menempel, dll.
Dilarang membuat acara clipboard "khusus" dengan <input type="text" id="input"> oninput: <span id="result"></span> <script> input.oninput = function() { result.innerHTML = input.value; }; </script>4 di semua browser kecuali Firefox. Dan bahkan jika kami berhasil mengirimkan peristiwa semacam itu, spesifikasi dengan jelas menyatakan bahwa peristiwa "sintetik" semacam itu tidak boleh menyediakan akses ke papan klip
Bahkan jika seseorang memutuskan untuk menyimpan <input type="text" id="input"> oninput: <span id="result"></span> <script> input.oninput = function() { result.innerHTML = input.value; }; </script>_5 di event handler, dan kemudian mengaksesnya nanti – itu tidak akan berhasil
Untuk mengulangi, hanya berfungsi dalam konteks penangan peristiwa yang diprakarsai pengguna
Di sisi lain, adalah API yang lebih baru, dimaksudkan untuk digunakan dalam konteks apa pun. Itu meminta izin pengguna, jika diperlukan