oninput
Uruchamia kod JavaScript przy każdej zmianie wartości pola: po wpisaniu znaku, wklejeniu tekstu albo przesunięciu suwaka.
- Dotyczy
<input>,<textarea>,<select>i elementy zcontenteditable. Zdarzenie wypływa, więc atrybut działa też na<form>
Przykład
#<label for="bio">Kilka słów o sobie</label>
<textarea id="bio" rows="3" maxlength="80"
oninput="document.getElementById('count').textContent = this.value.length"></textarea>
<p><span id="count">0</span> / 80 znaków</p>Licznik zmienia się przy każdym znaku, także przy wklejaniu i usuwaniu tekstu.
Definicja i zastosowanie
#Atrybut oninput reaguje na zdarzenie input, które zachodzi za każdym razem, gdy użytkownik zmieni wartość pola: wpisze lub usunie znak, wklei tekst, wybierze podpowiedź, przesunie suwak albo zaznaczy pole wyboru. Działa w elementach <input>, <textarea>, <select> i w elementach z contenteditable.
To najlepszy wybór, gdy strona ma reagować na bieżąco: licznik znaków, podgląd na żywo, filtrowanie listy, wskaźnik siły hasła. Tym różni się od onchange, które w polach tekstowych czeka, aż użytkownik zatwierdzi wartość. Zdarzenie input wypływa w górę drzewa, więc jeden atrybut na <form> obsłuży wszystkie pola w środku.
Gdy atrybut stoi na polu, this wskazuje to pole, a this.value jego aktualną wartość, zawsze jako tekst. Zmiana wartości w skrypcie, np. field.value = "", nie wywołuje zdarzenia input. W większych projektach zamiast atrybutu dodaj obsługę w skrypcie: field.addEventListener("input", …).
Składnia
#<input oninput="kod JavaScript">Dostępne w kodzie atrybutu
#this.value
Aktualna wartość pola, zawsze jako tekst.this.valueAsNumber
Wartość zamieniona na liczbę w polachnumberirange. Przydaje się do obliczeń.event.inputType
Rodzaj zmiany, np.insertText(wpisanie znaku),deleteContentBackward(Backspace) alboinsertFromPaste(wklejenie).event.data
Wpisany znak, np."a". Przy usuwaniu tekstu ma wartośćnull.
Więcej przykładów
#<label for="goal">Dzienny cel nauki</label>
<input type="range" id="goal" min="5" max="60" step="5" value="15"
oninput="document.getElementById('goal-value').textContent = this.value + ' min'">
<output id="goal-value" for="goal">15 min</output>Przy suwaku zdarzenie input zachodzi przez cały czas przesuwania, a change dopiero po puszczeniu uchwytu.
Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Nie wysyłaj zapytania do serwera przy każdym znaku. W wyszukiwarce z podpowiedziami odczekaj chwilę po ostatnim naciśnięciu klawisza (tak zwany debounce).
- Jeśli liczy się tylko ostateczna wartość, np. przy zapisie ustawień, wybierz
onchange. Kod uruchomi się rzadziej.
Powiązane hasła
#- onchangeUruchamia kod JavaScript, gdy użytkownik zatwierdzi nową wartość pola: wybierze opcję, zaznaczy pole wyboru albo skończy pisać.
- <input>Pole formularza: tekst, e-mail, hasło, liczba, data, suwak, pole wyboru, plik i wiele innych.
- <textarea>Wielowierszowe pole tekstowe na dłuższe wypowiedzi: wiadomości, opinie, opisy.
- <output>Wynik obliczenia lub działania użytkownika, na przykład suma w kalkulatorze.
- onkeydownUruchamia kod JavaScript w chwili naciśnięcia klawisza. Służy do skrótów klawiszowych i obsługi klawiszy takich jak Enter czy Escape.
Widzisz błąd albo brakuje przykładu? Napisz do nas.