Indledning
mhaGetAccesskey er et JavaScript som høster genvejstaster fra en form. Brugeren kan få listet genvejstaster med tilhørende labels og titler enten i en alertbox eller direkte på siden. I listen indgår alle formens elementer såsom input felter, select-bokse, textarea samt diverse knapper.
Browsere såsom MSIE5+, NS6+, Mozilla og Opera7 m.fl. som forstår de metoder der bliver brugt i koden,
får mulighed for at få vist genvejstasterne.
Koden tager ikke højde for genvejstaster på hyperlinks og button elementerne.
Eksempel
- Clean En ren version, hvor HTML og JS er adskilt i 2 filer.
Opsætning
For at opbygge en side med mhaGetAccesskeys skal du bruge javascript-filen; mhagetaccesskeys.js.
I HTML-dokumentet som indeholder formen skal der indsætte 2 div
elementer med id'erne, accesskeyPanel
og accesskeys.
accesskeyPaneler elementet som indeholder knapperne.accesskeysindeholder teksten med genvejstaster.
Hvis der ikke er behov for begge knapper kan der i funktionen init
udkommenteres en af knapperne.
/* Button which alert accesskeys */
oButton1 = document.createElement('INPUT')
oButton1.setAttribute('type','button');
oButton1.value = 'Alert Accesskey...';
oButton1.onclick = alertAccesskeys;
oKeyPanel.appendChild(oButton1)
/* Button which display accesskeys */
oButton2 = document.createElement('INPUT')
oButton2.setAttribute('type','button');
oButton2.value = "Display Accesskey";
oButton2.onclick = displayAccesskeys;
oKeyPanel.appendChild(oButton2)
Dokumentation
Koden benytter namespaces (ex. gak.showAccesskeys) som du kan læse mere om i artiklen
Designing for portability: 1
i kapitlet "Isolating your code through Namespaces"
Ved eventen onload bliver funktionen init kørt, hvis
browseren understøtter de metoder der bliver brugt i koden.
I init indsættes knapperne,
med onclick eventen alertAccesskeys og displayAccesskeys,
som begge fører til gak.showAccesskeys
med henholdsvis display og alert som parameter.
gak.showAccesskeys er kernen i mhaGetAccesskey,
som henter genvejstasterne for labels og knapper, og viser dem.
Dette gøres via funktionen
gak.getLabelKeys() som henter genvejstasterne for labels og
gak.getButtonKeys() for knapperne.
Følgende 4 arrays bliver brugt til at gemme informationern om genvejstasterne.
aID[]- ID på form elementet.aKey[]- Genvejstasten på form elementerne, lablen eller knappen.aText[]- Label teksten på lablen eller value'en på knappen.aTitle[]- Titel teksten på form elmentet, lablen eller knappen.
gak.displayAccesskeys viser genvejstasterne udfra det parameter funktionen får med,
enten på siden eller i en alertboks. Det er her man skal ændre hvis man ønsker
en anden formatering.
Der er 2 hjælpe funktioner i koden;
Array.prototype.push og getInnerText.
Array.prototype.push er lavet kun for
MSIE5, der mangler metoden push
på et array.
getInnerText returnere den indre tekst for en node uden HTML tags, enten på
MSIE's måde med innerText
eller på W3C's måde med ownerDocument.createRange() og
selectNodeContents.