Zdarzenie wejściowe
Przykład
Wykonaj JavaScript, gdy użytkownik napisze coś w polu <input>:
<input type="text" oninput="myFunction()">
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Zdarzenie oninput występuje, gdy element pobiera dane wejściowe użytkownika.
To zdarzenie występuje, gdy zmienia się wartość elementu <input> lub <textarea>.
Wskazówka: to wydarzenie jest podobne do wydarzenia onchange . Różnica polega na tym, że zdarzenie oninput występuje natychmiast po zmianie wartości elementu, podczas gdy onchange występuje, gdy element traci fokus, po zmianie zawartości. Inną różnicą jest to, że zdarzenie onchange działa również na elementach <select>.
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje zdarzenie.
Event | |||||
---|---|---|---|---|---|
oninput | Yes | 9.0 | 4.0 | 5.0 | Yes |
Składnia
W HTML:
<element oninput="myScript">
W JavaScript:
object.oninput = function(){myScript};
W JavaScript za pomocą metody addEventListener():
object.addEventListener("input", myScript);
Uwaga: Metoda addEventListener() nie jest obsługiwana w programie Internet Explorer 8 i wcześniejszych wersjach.
Szczegóły techniczne
Bąbelki: | tak |
---|---|
Możliwość anulowania: | Nie |
Typ wydarzenia: | Zdarzenie , WejścieZdarzenie |
Obsługiwane tagi HTML: | <input type="kolor">, <input type="data">, <input type="datetime">, <input type="email">, <input type="miesiąc">, <input type=" number">, <input type="hasło">, <input type="range">, <input type="search">, <input type="tel">, <input type="text">, < input type="time">, <input type="url">, <input type="week"> i <textarea> |
Wersja DOM: | Wydarzenia poziomu 3 |
Więcej przykładów
Przykład
Suwak zakresu - jak dynamicznie aktualizować wartość suwaka:
<input type="range" oninput="myFunction(this.value)">