Jika nilainya diubah, Firefox, Chrome, dan Safari tidak memperbarui DOM dan elemen penguraian Test Studio tidak mengenali nilai yang diubah. Jika nilai masukan diambil melalui JavaScript, maka semua browser mengembalikan nilai yang benar. Hasil yang benar dikembalikan jika kode berikut dipanggil untuk elemen input teks yang nilainya dimodifikasi. Ini karena nilainya diambil dengan menjalankan JavaScript di browser
browser.Find.ByName("oname").Value;Jika kode di bawah ini yang digunakan, maka hanya nilai awal yang diambil. Ini karena Test Studio menggunakan elemen DOM yang diurai dan DOM tersebut salah
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 menampilkan 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