oninput-tapahtuma

DOM-tapahtumat InputEvent

Määritelmä ja käyttö

oninput-tapahtuma tapahtuu, kun elementti saa käyttäjän syötteen.

Tämä tapahtuma tapahtuu, kun <input> tai <textarea>-elementin arvo muuttuu.

Vinkki:Tämä tapahtuma on samanlainen kuin onchange-tapahtuma. Ero on siinä, että oninput-tapahtuma tapahtuu heti, kun elementin arvo muuttuu, kun taas onchange tapahtuu, kun elementti menettää fokuksen ja sisältö muuttuu. Toinen ero on, että onchange-tapahtuma sovelletaan myös <select>-elementteihin.

Esimerkki

Esimerkki 1

Kun käyttäjä kirjoittaa sisältöä <input>-kenttään, suoritetaan JavaScript:

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

Kokeile itse

Esimerkki 2

Asetusliukus - kuinka päivittää liukusäädinarvo dynaamisesti:

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

Kokeile itse

Syntaksi

HTML:ssä:

<elementti oninput="myScript">

Kokeile itse

JavaScriptissa:

objekti.oninput = function(){myScript};

Kokeile itse

JavaScriptissa käytetään addEventListener() -menetelmää:

objekti.addEventListener("input", myScript);

Kokeile itse

Huomautus:Internet Explorer 8 tai aikaisemmat versiot eivät tue addEventListener() -menetelmä.

Tekninen yksityiskohta

Puhkeava: Tuki
Peruutettavissa: Ei tuettu
Tapahtumatyypit: Event, InputEvent
Tuetut HTML-merkit: <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"> sekä <textarea>
DOM versio: Taso 3 -tapahtumat

Selaimen tuki

Taulukossa olevat numerot mainitsevat ensimmäisen selaimen version, joka tukee tapahtumaa täysin.

Tapahtumat Chrome IE Firefox Safari Opera
oninput Tuki 9.0 4.0 5.0 Tuki
DOM-tapahtumat InputEvent