KOMPOOS.NL

oninput - HTML5

home » manuals » html5 » oninput.html

sitemap | terug naar het html5 referentie - events - overzicht

voorbeeld oninput event

uitleg oninput procedure

IE explorer kan (nog) niet overweg met oninput. Als je deze pagina ook werkbaar voor IE wilt maken moet je de vervangende regel met onpropertychange gebruiken. In alle browsers zal het werken; maar het is dan natuurlijk geen goede html5-code meer... Kies één van de twee html-regels en plaats die in de body sectie van jouw pagina. In dezelfde sectie moet je ook nog het javascript (zo laag als mogelijk op de pagina) plaatsen. De oninput-procedure triggert bij elke verandering in een (willekeurige) input een script. Het is natuurlijk onlogisch om bij elke wijziging een alert te produceren zoals op deze pagina. Wijzig het javascript dusdanig dat het een nuttige functie op jouw website krijgt.

de html5 code voor het oninput event

<input type="text" oninput="oninput_(event)" value="verander de tekst" />

de niet validerende IE "helper" code (vervanging voor bovenstaande regel)

<input type="text" oninput="oninput_(event)" onpropertychange="onpropertychange_(event)" value="verander de tekst" />

het javascript voor het oninput "gebeuren"

<script>
/*global alert: false */
function oninput_(event) {
    alert("de tekst wordt nu : " + event.target.value);
}
function onpropertychange_(event) {
    if (event.propertyName.toLowerCase() == "value") {
        alert("de tekst wordt nu :  " + event.srcElement.value);
    }
}
</script>