網(wǎng)頁設(shè)計——如何讓HTML在谷歌瀏覽器上支持鍵盤快捷鍵導(dǎo)航？
許多小伙伴都知道，在網(wǎng)頁開發(fā)中，我們只要在HTML代碼中設(shè)置元素的accesskey屬性，就可讓IE瀏覽器支持鍵盤快捷導(dǎo)航，按下相應(yīng)的accesskey鍵，就能在元素之間進(jìn)行跳轉(zhuǎn)。如頁面內(nèi)容較多，可在關(guān)鍵的元素上設(shè)置accesskey屬性，可以讓使用鍵盤操作的視障用戶方便高效的瀏覽頁面內(nèi)容，大大縮短瀏覽無效數(shù)據(jù)的時間。然而目前微軟已經(jīng)放棄了對IE瀏覽器的支持，許多小伙伴們也選擇了更加快速高效的谷歌瀏覽器(Google Chrome)作為默認(rèn)瀏覽器。而谷歌瀏覽器對accesskey屬性的處理機(jī)制與IE有所不同,按下accesskey鍵并非跳轉(zhuǎn)到相應(yīng)元素上，而是直接激活相應(yīng)元素的onclick事件。這對使用鍵盤操作的視障用戶來說，如需導(dǎo)航到一個頁面內(nèi)容較多的站點(diǎn)就會十分不便。
那么我們?nèi)绾巫孒TML在谷歌瀏覽器中也能支持鍵盤導(dǎo)航呢？
實(shí)現(xiàn)原理：
1.判斷是否為IE瀏覽器，若為IE瀏覽器則使用默認(rèn)設(shè)定的accesskey對頁面元素進(jìn)行導(dǎo)航。若不是IE瀏覽器則執(zhí)行相應(yīng)js腳本代碼，更改相應(yīng)屬性和設(shè)定鍵盤監(jiān)視事件。
2.注釋掉頁面上的accesskey屬性，防止使用谷歌瀏覽器時按下對應(yīng)accesskey觸發(fā)相應(yīng)元素的onclick事件。
3.監(jiān)視頁面的鍵盤按下事件，檢索焦點(diǎn)元素的上一個或下一個匹配項目，從而跳轉(zhuǎn)到相應(yīng)位置。
下面將用一個實(shí)例講解實(shí)現(xiàn)方法：
一、html代碼
<html>
<head>
<title>測試鍵盤導(dǎo)航</title>
</head>
<body>
<a accesskey='x'>無憂天空</a>
<a accesskey='x'>愛忙網(wǎng)</a>
<a accesskey='x'>tk貓</a>
<a href="http://test1" accesskey='z'>測試1</a>
<a href="http://test2" accesskey='z'>測試2</a>
<a href="http://test3" accesskey='z'>測試3</a>
<script src="acc.js">
</script>
</body>
</html>
二、acc.js代碼
(function() {
"use strict";//以嚴(yán)格模式運(yùn)行
//下面檢測是否是IE瀏覽器，如果是，那么就不執(zhí)行下面的代碼
if(window.ActiveXObject || "ActiveXObject" in window) {
return;
}
//下面的函數(shù)將注釋掉accesskey屬性，否則在諸如谷歌瀏覽器中按下相應(yīng)的access鍵就會激活對應(yīng)元素的onclick事件。
(function(){
var reset_element_key=function(elements,name,value,new_name){
var elt_array = Array.prototype.slice.call(elements);
? var filtered = elt_array.filter(function (elt) {
elt.removeAttribute(name);
elt.setAttribute(new_name,value);
return elt;
});
return filtered;
}
var x_element=document.querySelectorAll("[accesskey='x']");
reset_element_key(x_element,"accesskey","x","accesskeyx");
var z_element=document.querySelectorAll("[accesskey='z']");
reset_element_key(z_element,"accesskey","z","accesskeyz");
})();
//setFocus函數(shù)用來跳轉(zhuǎn)到當(dāng)前焦點(diǎn)的上一個或下一個匹配元素
function setFocus(selector, op) {
var elsArray = Array.prototype.slice.call(document.all);
var len = elsArray.length;
var fs=document.activeElement
var fsIndex= elsArray.indexOf(fs);
var index=0;
if(op=='+'){
index=fsIndex+1;
if(index>=len){
index=0;
}
}else if(op=='-'){
index=fsIndex-1;
if(index
index=len-1;
}
}
while(index!=fsIndex)
{
if(elsArray[index].hasAttribute&&elsArray[index].hasAttribute(selector)){
elsArray[index].focus();
break;
}
if(op=='+'){
index+=1;
if(index>=len){
index=0;
}
}else{
index-=1;
if(index
index=len-1;
}
}
}
}
//監(jiān)視頁面的鍵盤按下事件
? ? ? ? ? document.onkeydown = function (e) {
//用戶按下了alt+shift+x
if(e.altKey&&e.shiftKey && e.keyCode == 88) {
setFocus("accesskeyx", '-');
return false;
}
else if(e.altKey&& e.keyCode == 88) {//用戶按下了alt+x
setFocus("accesskeyx", '+');
return false;
}
else if(e.altKey&&e.shiftKey && e.keyCode == 90) {//用戶按下了alt+shift+z
setFocus("accesskeyz", '-');
return false;
}
else if(e.altKey&& e.keyCode == 90) {//用戶按下了alt+z
setFocus("accesskeyz", '+');
return false;
}
}
})();
