Peristiwa perubahan nilai kotak teks dalam javascript

Acara perubahan JavaScript adalah jenis acara yang dijalankan saat fokus pada suatu elemen diubah. Acara perubahan JavaScript mewarisi semua metode dan properti Acara

Di sini, di bagian ini, kita akan memahami dan mengimplementasikan penggunaan praktis acara perubahan pada berbagai elemen JavaScript seperti teks input, kotak centang, tombol radio, elemen pilih, dan sebagainya.

Untuk menggunakan change event pada elemen JavaScript, kita perlu menambahkan metode event handler yang dapat kita gunakan addEventListener() atau atribut onChange dari elemen tersebut. Sintaks untuk keduanya diberikan di bawah ini

metode addEventListener()

atribut onChange

Kami akan membahas acara perubahan JavaScript menggunakan kedua cara

Menggunakan acara perubahan JavaScript pada elemen Input

Ada berbagai jenis masukan untuk berbagai elemen seperti kotak teks, tombol radio, atau kotak centang. Saat Anda memberi input dan kemudian berpindah ke elemen lain, seperti menekan tombol atau mouse di atas tombol, peristiwa perubahan mulai beraksi. Namun, saat kita fokus pada input, event change tidak berfungsi. Mari kita lihat dengan bantuan beberapa contoh

Di bawah ini adalah beberapa contoh yang akan membuat kita mengerti penggunaan event change

Contoh 1

Menggunakan perubahan acara pada elemen input sebagai teks

Output dari kode di atas ditunjukkan di bawah ini

Ketika kita mengklik tombol 'Klik saya', fokus hilang dari kotak teks yang berarti bahwa acara perubahan akan mulai beraksi. Juga, kita dapat melihat bahwa ketika kita memberikan input, event change tidak akan bekerja. Setelah mengklik tombol, teks ditampilkan di label

Contoh 2

Menggunakan atribut onChange

Keluaran

Pada kode di atas, saat kita mengetik beberapa teks di kotak teks, fokus acara onChange keluar tetapi segera setelah kita mengklik di suatu tempat di layar, atribut onChange mulai beraksi

Menggunakan ubah acara pada tombol kotak radio

Dalam hal tombol kotak radio, acara perubahan berperan setelah kami memilih salah satu tombol radio. Kita akan melihat pada kode di bawah ini

Output di atas ditunjukkan di bawah ini

Ketika kita mengklik salah satu tombol radio, pesan yang ditentukan ditampilkan yang berarti bahwa dengan mengklik tombol radio, fokusnya hilang

Menggunakan perubahan acara pada elemen pilih

Dalam kasus elemen pilih, acara perubahan berfungsi saat pemilihan nilai tertentu selesai. Di bawah ini kami telah membahas contoh di mana kami dapat memahami cara kerja elemen pilih di atas nilai

Contoh

Keluaran

Pada output di atas, kita dapat melihat bahwa ketika kita memilih nilai dari daftar, nama akan ditampilkan di sampingnya. Itu karena ketika kita memilih nilai, i. e. , saat pemilihan selesai, acara perubahan mulai berperan. Namun, saat kami melakukan pemilihan, acara perubahan tidak berfungsi

Konteks fungsi event handler (tersedia melalui kata kunci this) akan disetel ke instance widget

Penting. Acara tidak diaktifkan saat nilai widget diubah dari kode

Data Peristiwa

e. pengirim kendo.ui.TextBox

Instance widget yang mengaktifkan peristiwa

Contoh - berlangganan acara "ubah" selama inisialisasi

<input id="textbox" />
<script>
    $("#textbox").kendoTextBox({
        change: function(e) {
            var value = this.value();
/* The result can be observed in the DevTools(F12) console of the browser. */
            console.log(value);
            // Use the value of the widget
        }
    });
</script>

Contoh - berlangganan acara "ubah" setelah inisialisasi

<input id="textbox" />
<script>
    function textbox_change(e) {
        var value = this.value();
/* The result can be observed in the DevTools(F12) console of the browser. */
        console.log(value);
        // Use the value of the widget
    };
    $("#textbox").kendoTextBox();
    var textbox = $("#textbox").data("kendoTextBox");
    textbox.bind("change", textbox_change);
</script>

Acara perubahan diaktifkan hanya setelah nilai widget diubah dan widget itu sendiri diburamkan. Anda dapat menambahkan acara/metode khusus dengan memperluas fungsionalitas TextBox yang ada. Cara menambahkan event keyup_ ke TextBox ditunjukkan dalam artikel ini

Misalnya, saat kami mengetik di bidang teks di bawah – tidak ada acara. Tapi saat kita memindahkan fokus ke tempat lain, misalnya, klik tombol – akan ada change acara

<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>

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>

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>

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>

<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>

<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>

<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>

<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>

Jadi contoh di atas menggunakan

<input type="text" id="input"> oninput: <span id="result"></span>
<script>
  input.oninput = function() {
    result.innerHTML = input.value;
  };
</script>

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>

<input type="text" id="input"> oninput: <span id="result"></span>
<script>
  input.oninput = function() {
    result.innerHTML = input.value;
  };
</script>

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>

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>

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>

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

Bagaimana cara menggunakan acara onchange di JavaScript untuk kotak teks?

Bagaimana cara mengubah nilai kotak teks dalam JavaScript?

Bagaimana cara menggunakan acara perubahan di JavaScript?

Apa itu acara Onchange di JavaScript?