jesteś w: Główna > javascript > Magiczny onchange
Ostatnia aktualizacja tej strony: 2007-02-16, 14:02:58

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)

Menu

Działy:

Quick start:

Inne:

animacje Flash

Diablo 2: