Peristiwa oninput

Peristiwa DOM InputEvent

Definisi dan penggunaan

Peristiwa oninput terjadi saat elemen menerima input pengguna.

Peristiwa ini terjadi saat nilai elemen <input> atau <textarea> berubah.

Pemberitahuan:Peristiwa ini mirip dengan Peristiwa onchange. Perbedaan utama adalah peristiwa oninput terjadi segera setelah nilai elemen berubah, sementara onchange terjadi saat elemen kehilangan fokus dan konten berubah. Perbedaan lainnya adalah peristiwa onchange juga berlaku untuk elemen <select>.

Contoh

Contoh 1

Eksekusi JavaScript saat pengguna menulis konten di bidang <input>:

<input type="text" oninput="myFunction()">

Coba sendiri

Contoh 2

Slider rentang - Bagaimana mengupdate nilai slider secara dinamis:

<input type="range" oninput="myFunction(this.value)">

Coba sendiri

Sintaks

Pada HTML:

<elemen oninput="myScript">

Coba sendiri

Pada JavaScript:

objek.oninput = function() {myScript};

Coba sendiri

Pada JavaScript, gunakan metode addEventListener():

objek.addEventListener("input", myScript);

Coba sendiri

Keterangan:Internet Explorer 8 atau sebelumnya tidak mendukung Metode addEventListener().

Detil teknis

Bubbling: Dukungan
Dapat dibatalkan: Tidak didukung
Tipe event: Event, InputEvent
Tag HTML yang didukung: <input type="color">, <input type="date">, <input type="datetime">, <input type="email">, <input type="month">, <input type="number">, <input type="password">, <input type="range">, <input type="search">, <input type="tel">, <input type="text">, <input type="time">, <input type="url">, <input type="week"> serta <textarea>
Versi DOM: Peristiwa Level 3

Dukungan Browser

Angka di tabel menunjukkan versi browser pertama yang mendukung peristiwa ini sepenuhnya.

Peristiwa Chrome IE Firefox Safari Opera
oninput Dukungan 9.0 4.0 5.0 Dukungan
Peristiwa DOM InputEvent