Jan Janoušek

Pokud jste někdy programovali nějakou JavaScriptovou aplikaci, tak jste jistě narazili na problém s checkboxem v IE. Jde o to, že událost oncheck se nevolá při změně stavu, ale až při kliknutí na jiný prvek stránky, což je chyba. Správně by se měla zavolat už při té změně stavu.

Ukázka kódu, který bude v IE fungovat chybně, ale v ostatních prohlížečích správně:

 <script type="text/javascript"> function zmenaStavu(){ alert('Změna stavu!'); } </script> <input type="checkbox" onchange="zmenaStavu();" />

Jak to, ale zařídit, aby se choval IE korektně?
Stačí tato úprava:

 <script type="text/javascript"> function zmenaStavu(){ alert('Změna stavu!'); } </script> <input type="checkbox" onchange="zmenaStavu();" onclick="this.blur(); this.focus()" />

Jde jen o to, že nejdříve zařídíme, aby checkbox stratil focus (this.blur();), čímž jsme dosáhli toho, že se provede událost onchange. A následně jsme vrátili focus zpátky (this.focus();). Vracení focus není sice nutné, ale pokud někdo využívá pro navigaci ve formuláři klávesy tab, tak by nemohl přejít na další pole formuláře.

Jak to udělat, abyste nemuseli psát tento script u všech checkboxů ručně?
Stačí vložit na začátek stránky:

 <script type="text/javascript"> function addEvent(el, ev, fun){ if(el.addEventListener){ el.addEventListener(ev, fun, false); }else{ el.attachEvent('on'+ev, fun); } }

 function repareCheckboxs(){ var a = document.getElementsByTagName('input'); for(var i=0; i<a.length; i++){ var b = a[i].getAttribute('type'); if(b && b == 'checkbox'){ addEvent(a[i], 'click', function(){this.blur(); this.focus();}); } } }

 addEvent(window, 'load', repareCheckboxs); </script>

Tags: JavaScript