Klávesové zkratky na www stránkách

Znáte to. Potřebujete rychle provést rutinní akci v programu a musíte neustále hledat funkci v menu, což je dosti zdlouhavé. V dnešních programech pro Windows jsou již klávesové zkratky implementovány, ale v HTML to byl dosud problém. V tomto článku se dozvíte, jak nastavit klávesové zkratky pro funkce na www stránce.

Klávesové zkratky se dají s úspěchem využít např. pro rychlé přeskakování mezi textovými poli ve formuláři (lze použít i tabulátor) nebo ke kliknutí na odkaz bez použití myši. Tuto funkci přinesla až definice HTML 4.0 a tak tato funkce funguje pouze u Internet Exploreru 4.0 a vyšším. Netscape 4.51 tuto funkci bohužel nezná (jako mnoho dalších jiných).

Vnímavé čtenáře teď hned napadne velmi pravděpodobná možnost kolize klávesových zkratek na www stránce se zkratkami definovanými v prohlížeči. V takovém případě jsou klávesové zkratky prohlížeče ignorovány ve prospěch dokumentu.

Ovládání klávesových zkratek na www stránkách je jednoduché – levý ALT + klíčová klávesa, přičemž ovládání není citlivé na velikost znaku. Můžeme je vytvořit třeba následujícím příkladem – v hlavičce dokumentu první definujeme styl zobrazení klíčových kláves.

V našem příkladu jsou uvedeny dvě třídy – třída „.accesskey“ je použita pro podtržení klíčové klávesy a třída „.accesskey-link“ pro zvýraznění klíčové klávesy tučným písmem – což má smysl především u hypertextových odkazů, které již obvykle podtržené jsou a tedy pro zvýraznění musíme použít jinou možnost.

V samotném dokumentu vytvoříme nejdříve štítek <LABEL>. Pomocí tagu <SPAN> definujeme klíčovou klávesu a určíme třídu stylu pro zobrazení klíčové klávesy. Vybrali jsme třídu „.accesskey“, která definuje, že klíčový prvek bude podtržen. Určíme klíčový prvek. V našem případě je to písmeno T. Ukončíme definici klíčové klávesy </SPAN>. Napíšeme „ext“. To je zbytek slova Text. Vložíme textové pole a označíme ID <input type=“text“ ID=“stitek1″>. ID se používá k definici určující do jakého štítku patří toto textové pole. Ukončíme štítek </LABEL>.

V druhém případě definující klíčovou klávesu pro hypertextový odkaz je postup velmi podobný. Pouze je použita jiná třída stylu. Třída „.accesskey-link“ definuje, že klíčová klávesa bude tučná. Příklad:

Odkaz na Interval.cz – stiskněte ALT+O

Pro definici klávesové zkratky u odkazu můžeme použít i jednodušší způsob, a to ten, že to tagu <a> doplníme parametr ACCESSKEY=“klavesa“. Pokud to vztáhneme na náš příklad, bude HTML kód vypadat takto:

Příklad: Odkaz na Interval.cz – stiskněte ALT+O

Jak je vidět, není to nic složitého. Klávesové zkratky se zatím ovšem nikde moc nepoužívají – důvodem může být i to, že druhý nejrozšířenější prohlížeč, Netscape Navigator tuto funkci nepodporuje a svoji roli také hrají zvyky uživatelů.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.