Magiczny świat IE - onchange w polach formularza
Mamo! Mamo! onchange mi nie działa!
Czasami pojawia się konieczność wywołania jakiejś akcji po zmianie zaznaczenia pola typu checkbox
. Nie zawsze chcemy korzystać z onclick, bo w tych niektórych się to po prostu nie sprawdza.
Cała sprawa wyglądała by prosto, ponieważ mamy dostęp do zdarzenia onchange
, które jest wywoływane po zmianie wartości pola i "zdjęciu" focusa z niego*.
Wyglądałaby prosto ale ludzie w pewnym wielkim koncernie postanowili, że tak być nie może i zrobili wszystko po swojemu. Wszystkie przeglądarki uznają, że focus jest automatycznie zdjęty po zmianie statusu checkboxa, natomiast ta jedna, wyjątkowa, specjalnej troski, z dwuczłonową nazwą oznaczana skrótem IE ... tam, tam, tararam ... focusa nie zdejmuje!
Takie coś oczywiście uniemożliwia wywoływanie onchange na bieżąco - najpierw trzeba kliknąć na checkboxa żeby zmienić jego wartość, a później gdziekolwiek indziej żeby wywołać onchange (zdjąć focus z pola)!
Gówniarzu mówiłam, że na E się nie klika!
Jedynym sposobem jaki udało mi się znaleźć jest dodanie akcji onclick do danego checkboxa i wywołanie metody blur()
usuwającej fokus ze wskazanego pola. Funkcyjka JavaScript, która automatycznie doda takie zdarzenie onclick do wszystkich checkboxów wygląda tak:
function addAutoBlur(){
var inp = document.getElementsByTagName("input");
for(var i=0; i<inp.length; i++){
if(inp[i].type=="checkbox"){
inp[i].onclick = function(){this.blur(); this.focus();}
}
}
}
i należy pamiętać, że usunie ona wszyskie onclicki przypisane wcześniej!
Można też skorzystać z czegoś dla jednego checkboxa:
document.getElementById("myCheckbox").onclick = function{this.blur();}
lub:
function addAutoBlur(el){
document.getElementById(el).onclick = function{this.blur();}
}
A co z innymi polami?
To co napisałem wcześniej działa na checkboxy i pewnie na radio. Niestety nie da się przy pomocy takiego rozwiązania monitorować na bieżąco zmian w polach typu text czy pokrewnych (w żadnej przeglądarce). Nie mam pojęcia jak to zadziała z selectami ale pewnie nie zadziała.
Dobrą nowiną jest to, że przeglądarki kliknięcie na label przypisany do pola traktują jak kliknięcie na samo pole, dlatego nie trzeba osobnego onclick przypisywać do <label />. W IE konstrukcja <label><input ... /> opis </label>
musi wyglądać tak: <label for="myfield"><input id="myfield" ... /> opis </label>
. W3C o elemencie label (szczególnie istotna jest notka o przekazywaniu focusa).
* Specyfikacja: http://www.w3.org/TR/html401/interact/scripts.html#h-18.2.3 mówi, że wywołanie onchange nastepuje gdy obiekt traci swój focus i jednocześnie nastąpiła zmiana wartości od czasu otrzymania focusa.
Problem w tym, że: 1. Nie wiadomo czy po kliknięciu na checkboxa focus ma być automatycznie zdjęty czy nie; 2. Czy w ogóle onchange może być zastosowany na checkboxie skoro tak naprawdę nie zmienia się jego wartość(value) ale zmienia się jego stan (selected=true|false)