Kako uloviti F1 iz Javascripta

Utorak, 9. Rujna 2008.

Normalno ponašanje preglednika kada opališ po tipki F1 (Help) je otvaranje pomoći ZA BROWSER u kojem to napraviš. I to je okej.

Ali ponekad se javlja potreba da F1 bude nešto drugo, nešto na što ti kao web developer možeš utjecati.

Mnoge se aplikacije danas sele s desktopa na web, sučelje na koje su zaposlenici navikli prebacuje se na online rješenja, i ljudi očekuju isto ponašanje koje se vuče čak (još) iz starih (dobrih) DOS vremena.

I onda dobiju web aplikaciju koja radi skoro čak kao i stara bivša aplikacija na koju se naviklo.

Samo što ne radi F1 koji je onda imao sasvim drugačiju funkcionalnost.

A može se. Samo treba imati noviji browser.

• • • • •

Internet Explorer si je fino dodao nestandardni onhelp() događaj (event) koji može presrest nabijanje po F1 tipki. Da bi ubacili nešto svoje dovoljno je da pozovete Javascript kod koji vrati FALSE:

Ovo je naravno samo za test da li radi. Inače želimo pozvati neku funkciju koja će servirati nekakvu help stranicu, e.g.:

function go_help()
{
location.href = 'help.html';
}

Za ostale browsere moramo kemijati. Metodom pokušaja i pogreške, jakako, dolazimo do nekih zaključaka:

1. Gecko i Webkit browseri kuže onkeydown() iz kojeg možeš uhvatiti F1, vratit FALSE i sve pet

2. Opera ne kuži onkeydown() za funkcijske tipke, ali kuži onkeypress():

3. onkeypress() će uhvatiti i Gecko (Safari neće)

4. Jebeš browsere.

• • • • •

Ako sve to zaokružimo, optimiziramo i popijemo pivo (za svaki slučaj) vidimo da su nam ostala samo tri događaja:

1. onhelp() (IE)
2. onkeydown() (Safari, Firefox)
3. onkeypress() (Firefox, Opera)

Napravit ćemo stoga testnu funkciju:

function f1()
{
alert('Pritisnuo si F1!);
}

Pa funkciju koja će obraditi IE:

function iehelp()
{
f1()
return false
}

I funkciju koja obrađuje sve ostalo, eventi i to:

function getevent(e)
{
      var e = e || window.event
      if(e.keyCode == 112)
      {
            f1()
            return false
      }
}

(112 je kod tipke F1 u događajima onkeyup(), onkeydown() i onkeypress().)

• • • • •

Sad nam ostaje da napravimo logiku kojom ćemo naš (Javascript) kod izvršiti SAMO JEDNOM ako korisnik pritisne F1, pošto neki browseri pokreću više događaja ako opičimo po F1.

Napravit ćemo se blesavi i parsati navigator.userAgent u kojem je zapisan preglednikov "potpis".

Pritom uzimamo u obzir Operu koja kada se "zamaskira" kao IE još uvijek u sebi ima string "MSIE", ali ima i string "Opera". Dakle prva je na redu.

Slijedi dakle ovakva nekakva logika:

1. Ako je Opera => onkeypress()
2. Ako je MSIE => onhelp()
3. Ako je Safari => onkeydown()
4. Ako nije ništa od navedenog => onkeypress()

Ako to prevedemo na Javascript dobijemo ovo:

var b = navigator.userAgent

if(b.indexOf('Opera') > -1)
      onkeypress = getevent
else
if(b.indexOf('MSIE') > -1)
      onhelp = iehelp
else
if(b.indexOf('Safari') > -1)
      onkeydown = getevent
else
    onkeypress = getevent

I time smo dobili presretanje (interceptiranje) pritiska na tipku F1 u većini browsera.

(Većini. Ne radi u Konqueroru, ali radi u Chrome.)

Cijeli kod nalazi se ovdje (ZIP, sitno bajtova). I btw ako ti je ovo bilo korisno dužan si pivo.

Testirano na: IE6+, FF1.5+, Safari 3+, Opera 9+ i Chrome.

[Programiranje]

Komentari

10.09.2008. 11:52 | 1

Dora

A kako stoje stvari s Google Chrome browserom? On navodno ima potpuno novu arhitekturu, hoće li i kako će Javascript raditi u njemu?

10.09.2008. 12:11 | 2

Dado

U biti radi, ipak su testirali na masi stranica.