Lion's Fart RSS Feed
home ‹‹

Kako uloviti F1 iz Javascripta

Utorak, 9. Rujna 2008.
Help key 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:

<body onhelp="javascript:alert('Opalio si F1!'); return 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

<body onkeydown="javascript:alert('Opalio si F1!'); return false">

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

<body onkeypress="javascript:alert('Opalio si F1!'); return false">

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 =&gt; onkeypress()
2. Ako je MSIE =&gt; onhelp()
3. Ako je Safari =&gt; onkeydown()
4. Ako nije ništa od navedenog =&gt; 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.

Komentari

10.09.2008. 11:52 | 1

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

U biti radi, ipak su testirali na masi stranica.

Dodaj komentar

ime *

e-mail

www

Dozvoljeni tagovi su A, B, I, U i S. e-mail adresa se nigdje neće prikazati.

Control panel

Linkovi RSS feedDnevni linkovi

  1. 30 Interesting Half-Face Portrait Photography
    Pola lica.
  2. 16 of the Best SciFi Cartoons
    Naj SF crtići.
  3. A step to be ahead: start designing for mobile devices
    Uvod i showcase.
  4. The Family Prostitute
    Portraits of Women Brand-New to the Sex Trade. (slideshow)
  5. World's Largest Underwater Museum
    Najveći podvodni muzej na svijetu.
  6. 15 tips every computer geek should know to stay healthy
    Zdrav geek u zdravom tijelu.
  7. A virtual counter-revolution
    "The internet has been a great unifier of people, companies and online networks. Powerful forces are threatening to balkanise it." (The Economist)
  8. The right hand to every good villain. My favorite Bond henchmen
    Jaws, Donald Grant, Odd Job, Baron Samedi, Fiona Volpe. (007)
  9. 10 tips to follow to become a better web designer
    10 savjeta za web dizajnere.
  10. 26 Super Clean Websites
    "Čisti" sajtovi.
  11. The Truth About Infographics
    How the infographic-spam industry works? (infografika)
  12. The crap we put up with getting on and off an airplane
    "Ljepota" putovanja avionom. (The Oatmeal)
  13. Amazing pictures Kabul (1994.-2010.)
    Slike Kabula - danas i prije 16 godina.
  14. Collection of rare celebrity photos
    Rijetke slike poznatih faca.
  15. 15 Cancelled PlayStation 3 games that should have never been cancelled
    Igre koje su trebale izaći za PS3.
  16. 19 upcoming superhero movies you need to know about
    Dolazeći filmovi o superherojima.
  17. NASA Plans to Visit the Sun
    The project is called Solar Probe Plus. (Mashable)
  18. How many people are actually using Twitter?
    30%? (TNW)
  19. Samsung Galaxy Tab preview
    Samsungov Android tablet. (Engadget)
  20. 10 Unbelievable SMS Texting Stories
    Nevjerojatne SMS priče.