許多小夥伴都知道，在網頁開發中，我們隻要在HTML代碼中設置元素的accesskey屬性，就可讓IE浏覽器支持鍵盤快捷導航，按下相應的accesskey鍵，就能在元素之間進行跳轉。如頁面内容較多，可在關鍵的元素上設置accesskey屬性，可以讓使用鍵盤操作的視障用戶方便高效的浏覽頁面内容，大大縮短浏覽無效數據的時間。然而目前微軟已經放棄了對IE浏覽器的支持，許多小夥伴們也選擇了更加快速高效的谷歌浏覽器(Google Chrome)作為默認浏覽器。而谷歌浏覽器對accesskey屬性的處理機制與IE有所不同,按下accesskey鍵并非跳轉到相應元素上，而是直接激活相應元素的onclick事件。這對使用鍵盤操作的視障用戶來說，如需導航到一個頁面内容較多的站點就會十分不便。
test
實現原理：
1.判斷是否為IE浏覽器，若為IE浏覽器則使用默認設定的accesskey對頁面元素進行導航。若不是IE浏覽器則執行相應js腳本代碼，更改相應屬性和設定鍵盤監視事件。
2.注釋掉頁面上的accesskey屬性，防止使用谷歌浏覽器時按下對應accesskey觸發相應元素的onclick事件。
3.監視頁面的鍵盤按下事件，檢索焦點元素的上一個或下一個匹配項目，從而跳轉到相應位置。
下面将用一個實例講解實現方法：
<html>
<head>
<title>測試鍵盤導航</title>
</head>
<body>
<a href="無憂天空 - PC秘書 - 菜鳥老鳥通通一網打盡！" accesskey='x'>無憂天空</a>
<a href="http://amhl.vip" accesskey='x'>愛忙網</a>
<a href="首頁 - TK貓" 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>
html代碼
(function() {
"use strict";//以嚴格模式運行
//下面檢測是否是IE浏覽器，如果是，那麼就不執行下面的代碼
if(window.ActiveXObject || "ActiveXObject" in window) {
return;
}
//下面的函數将注釋掉accesskey屬性，否則在諸如谷歌浏覽器中按下相應的access鍵就會激活對應元素的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函數用來跳轉到當前焦點的上一個或下一個匹配元素
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<0){
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<0){
index=len-1;
}
}
}
}
//監視頁面的鍵盤按下事件
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;
}
}
})();
acc.js代碼
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
