oninput olayı
Tanım ve Kullanım
oninput olayı element kullanıcı girdisi aldığında gerçekleşir.
<input> veya <textarea> elementlerinin değeri değiştiğinde bu olay gerçekleşir.
İpucu:Bu olay benzerdir onchange olayı. Farklılık, oninput olayının element değeri değiştikten sonra hemen gerçekleşmesi, onchange olayının element odak kaybettiği ve içerik değiştiği zaman gerçekleşmesidir. Bir diğer fark da onchange olayının <select> elementleri için de geçerli olmasıdır.
Örnek
Örnek 1
<input> alanında kullanıcı içerik yazarken JavaScript çalıştırılır:
<input type="text" oninput="myFunction()">
Örnek 2
Aralık kaydırıcı - Kaydırıcı değeri nasıl dinamik olarak güncellenir:
<input type="range" oninput="myFunction(this.value)">
Gramer
HTML'de:
<element oninput="myScript">
JavaScript'te:
nesne.oninput = function(){myScript};
JavaScript'te addEventListener() metodu kullanarak:
nesne.addEventListener("input", myScript);
Açıklama:Internet Explorer 8 veya daha eski sürümler desteklenmiyor addEventListener() metodu.
Teknik ayrıntılar
Balonlama: | Destek |
---|---|
İptal edilebilir: | Desteklenmiyor |
Olay türleri: | Event, InputEvent |
Desteklenen HTML etiketleri: | <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"> ve <textarea> |
DOM sürümü: | 3. düzey olaylar |
Tarayıcı desteği
Tabloda belirtilen rakamlar, bu olayı tamamen destekleyen ilk tarayıcı sürümünü gösterir.
Olaylar | Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|---|
oninput | Destek | 9.0 | 4.0 | 5.0 | Destek |