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

18. listopadu 1999

•

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.

<form>
<label for=“stitek1″ accesskey=“T“>
<span class=“accesskey“>T</span>ext:
<input type=“text“ ID=“stitek1″ size=“20″>
</label> – stiskněte ALT+T
<form>
<label for=“link“ accesskey=“L“>
<a href=“http://www.interval.cz“ ID=“link“ TARGET=“_blank“>
<span class=“accesskey-link“>O</span>dkaz</a> na Interval.cz – stiskněte ALT+O
</label>

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:

<a href=“http://www.interval.cz/“ TARGET=“_blank“ ACCESSKEY=“O“><B>O</B>dkaz</a> na Interval.cz – stiskněte ALT+O

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ů.