onchange
Uruchamia kod JavaScript, gdy użytkownik zatwierdzi nową wartość pola: wybierze opcję, zaznaczy pole wyboru albo skończy pisać.
- Dotyczy
<input>,<select>i<textarea>. Zdarzenie wypływa, więc atrybut działa też na<form>
Przykład
#<label for="course">Wybierz kurs</label>
<select id="course" onchange="
const course = this.selectedOptions[0].text;
document.getElementById('choice').textContent = 'Wybrany kurs: ' + course;
">
<option value="">Nie wybrano</option>
<option value="html">HTML i CSS</option>
<option value="js">JavaScript</option>
<option value="python">Python</option>
</select>
<p id="choice">Wybrany kurs: brak</p>
<label>
<input type="checkbox" onchange="document.body.style.fontSize = this.checked ? '18px' : ''">
Większa czcionka w podglądzie
</label>Lista reaguje od razu po wyborze opcji, a pole wyboru po każdym zaznaczeniu i odznaczeniu. Stan pola odczytuje this.checked.
Definicja i zastosowanie
#Atrybut onchange reaguje na zdarzenie change, które zachodzi, gdy użytkownik zatwierdzi nową wartość pola. W listach <select>, polach wyboru, przyciskach opcji i polach plików dzieje się to od razu po wyborze. W polach tekstowych dopiero wtedy, gdy użytkownik opuści pole albo naciśnie Enter, a wartość różni się od tej sprzed edycji. W <textarea> Enter dodaje nową linię, więc tam liczy się tylko opuszczenie pola.
Dlatego onchange pasuje do ustawień i filtrów: zmiany sortowania, przełącznika trybu ciemnego, wyboru pliku do wysłania. Do reakcji na każdy wpisany znak lepsze jest oninput. Przy suwaku range zdarzenie change zachodzi dopiero po puszczeniu uchwytu, a input przez cały czas przesuwania.
W kodzie atrybutu this wskazuje pole. Wartość odczytasz z this.value, stan pola wyboru z this.checked, a wybrane pliki z this.files. Tak jak input, zdarzenie change wypływa w górę drzewa i nie zachodzi, gdy wartość zmieni skrypt. W większych projektach dodaj obsługę przez addEventListener("change", …).
Składnia
#<select onchange="kod JavaScript">…</select>Dostępne w kodzie atrybutu
#this.value
Wartość pola albo atrybutvaluewybranej opcji listy.this.checked
truelubfalsew polach wyboru i przyciskach opcji.this.selectedOptions
Wybrane opcje listy<select>. Tekst pierwszej z nich odczytasz przezthis.selectedOptions[0].text.this.files
Pliki wybrane w<input type="file">, każdy z nazwą, rozmiarem i typem.
Więcej przykładów
#<label for="city">Miasto</label>
<input id="city" type="text"
oninput="document.getElementById('input-log').textContent = this.value"
onchange="document.getElementById('change-log').textContent = this.value">
<p>input: <strong id="input-log"></strong></p>
<p>change: <strong id="change-log"></strong></p>Wpisz nazwę miasta. Wiersz „input” zmienia się przy każdym znaku, a „change” dopiero wtedy, gdy naciśniesz Enter albo klikniesz poza polem.
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 przenoś użytkownika na inną stronę zaraz po wyborze opcji z listy. Ktoś, kto przegląda listę strzałkami na klawiaturze, może wywołać
changeprzy każdej opcji. Dodaj przycisk „Przejdź”. - W polu pliku sprawdź w
onchangerozmiar i typ pliku, zanim go wyślesz. To wygoda dla użytkownika, ale serwer i tak musi sprawdzić plik jeszcze raz.
Powiązane hasła
#- oninputUruchamia kod JavaScript przy każdej zmianie wartości pola: po wpisaniu znaku, wklejeniu tekstu albo przesunięciu suwaka.
- <select>Rozwijana lista, z której użytkownik wybiera jedną lub kilka opcji.
- <input>Pole formularza: tekst, e-mail, hasło, liczba, data, suwak, pole wyboru, plik i wiele innych.
- onsubmitUruchamia kod JavaScript tuż przed wysłaniem formularza. Pozwala zatrzymać wysyłkę i obsłużyć dane w skrypcie.
Widzisz błąd albo brakuje przykładu? Napisz do nas.