网页设计——如何让HTML在谷歌浏览器上支持键盘快捷键导航？
许多小伙伴都知道，在网页开发中，我们只要在HTML代码中设置元素的accesskey属性，就可让IE浏览器支持键盘快捷导航，按下相应的accesskey键，就能在元素之间进行跳转。如页面内容较多，可在关键的元素上设置accesskey属性，可以让使用键盘操作的视障用户方便高效的浏览页面内容，大大缩短浏览无效数据的时间。然而目前微软已经放弃了对IE浏览器的支持，许多小伙伴们也选择了更加快速高效的谷歌浏览器(Google Chrome)作为默认浏览器。而谷歌浏览器对accesskey属性的处理机制与IE有所不同,按下accesskey键并非跳转到相应元素上，而是直接激活相应元素的onclick事件。这对使用键盘操作的视障用户来说，如需导航到一个页面内容较多的站点就会十分不便。
那么我们如何让HTML在谷歌浏览器中也能支持键盘导航呢？
实现原理：
1.判断是否为IE浏览器，若为IE浏览器则使用默认设定的accesskey对页面元素进行导航。若不是IE浏览器则执行相应js脚本代码，更改相应属性和设定键盘监视事件。
2.注释掉页面上的accesskey属性，防止使用谷歌浏览器时按下对应accesskey触发相应元素的onclick事件。
3.监视页面的键盘按下事件，检索焦点元素的上一个或下一个匹配项目，从而跳转到相应位置。
下面将用一个实例讲解实现方法：
一、html代码
<html>
<head>
<title>测试键盘导航</title>
</head>
<body>
<a href="http://sky808.com" accesskey='x'>无忧天空</a>
<a href="http://amhl.vip" accesskey='x'>爱忙网</a>
<a href="http://tkmao.net" 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";//以严格模式运行
//下面检测是否是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
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;
}
}
}
}
//监视页面的键盘按下事件
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;
}
}
})();
