sitemap | terug naar het html5 referentie - events - overzicht
Met onfocus kan je een script iets laten doen als een veld "focus" krijgt. Met onblur kan je (desgewenst) de oude situatie weer terug brengen. In dit voorbeeld wordt de tekstkleur van een input-veld veranderd als het veld focus krijgt. Plaats zowel de html-code als het javascript voor de onfocus/onblur procedure in de body-sectie van jouw pagina; het javascript (liefst) zo laag als mogelijk.
<script>
function getElementsByClass(de_tag, bewerk_deze_class, tag) {
var i,
j,
class_elementen = [];
var tag_elementen = de_tag.getElementsByTagName(tag);
var aantal_tag_elementen = tag_elementen.length;
var het_patroon = new RegExp(bewerk_deze_class);
for (i = 0, j = 0; i < aantal_tag_elementen; i++) {
if (het_patroon.test(tag_elementen[i].className)) {
class_elementen[j] = tag_elementen[i];
j++;
}
}
return class_elementen;
}
// de javascript functie die door onfocus wordt aangeroepen
function is_onfocus(welk_element) {
welk_element--;
var element_vars = getElementsByClass(document, 'on-focus', '*');
element_vars[welk_element].style.color = '#f0f';
}
// de javascript functie die door onblur wordt aangeroepen
function is_onblur(welk_element) {
welk_element--;
var element_vars = getElementsByClass(document, 'on-focus', '*');
element_vars[welk_element].style.color = '#000';
}
</script>
<form method="post">
<div>
<div>
<label for="onfocus-input-1">onfocus veld 1 - </label>
<input onfocus="is_onfocus(1)" onblur="is_onblur(1)" class="on-focus" type="text" id="onfocus-input-1" value="klik met de" name="onfocus-input-1" />
</div>
<div>
<label for="onfocus-input-2">onfocus veld 2 - </label>
<input onfocus="is_onfocus(2)" onblur="is_onblur(2)" class="on-focus" type="text" id="onfocus-input-2" value="muis op" name="onfocus-input-2" />
</div>
<div>
<label for="onfocus-input-3">onfocus veld 3 - </label>
<input onfocus="is_onfocus(3)" onblur="is_onblur(3)" class="on-focus" type="text" id="onfocus-input-3" value="een veld" name="onfocus-input-3" />
</div>
</div>
</form>