> 育儿
如何让html在谷歌浏览器上支持键盘快捷打开(谷歌浏览器键盘控制)
导语：如何让HTML在谷歌浏览器上支持键盘快捷键导航
网页设计——如何让HTML在谷歌浏览器上支持键盘快捷键导航？
许多小伙伴都知道，在网页开发中，我们只要在HTML代码中设置元素的accesskey属性，就可让IE浏览器支持键盘快捷导航，按下相应的accesskey键，就能在元素之间进行跳转。如页面内容较多，可在关键的元素上设置accesskey属性，可以让使用键盘操作的视障用户方便高效的浏览页面内容，大大缩短浏览无效数据的时间。然而目前微软已经放弃了对IE浏览器的支持，许多小伙伴们也选择了更加快速高效的谷歌浏览器(Google Chrome)作为默认浏览器。而谷歌浏览器对accesskey属性的处理机制与IE有所不同,按下accesskey键并非跳转到相应元素上，而是直接激活相应元素的onclick事件。这对使用键盘操作的视障用户来说，如需导航到一个页面内容较多的站点就会十分不便。
test
那么我们如何让HTML在谷歌浏览器中也能支持键盘导航呢？
实现原理：
1.判断是否为IE浏览器，若为IE浏览器则使用默认设定的accesskey对页面元素进行导航。若不是IE浏览器则执行相应js脚本代码，更改相应属性和设定键盘监视事件。
2.注释掉页面上的accesskey属性，防止使用谷歌浏览器时按下对应accesskey触发相应元素的onclick事件。
3.监视页面的键盘按下事件，检索焦点元素的上一个或下一个匹配项目，从而跳转到相应位置。
下面将用一个实例讲解实现方法：
一、html代码
<head><title>测试键盘导航</title></head><a href=&34; accesskey=&39;>无忧天空</a><a href=&34; accesskey=&39;>爱忙网</a><a href=&34; accesskey=&39;>tk猫</a><a href=&34; accesskey=&39;>测试1</a><a href=&34; accesskey=&39;>测试2</a><a href=&34; accesskey=&39;>测试3</a><script src=&34;></script>html代码
二、acc.js代码
(function() {&34;;//以严格模式运行//下面检测是否是IE浏览器，如果是，那么就不执行下面的代码if(window.ActiveXObject || &34; 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(&39;x&34;);reset_element_key(x_element,&34;,&34;,&34;);var z_element=document.querySelectorAll(&39;z&34;);reset_element_key(z_element,&34;,&34;,&34;);})();//setFocus函数用来跳转到当前焦点的上一个或下一个匹配元素function setFocus(selector, op) {var elsArray = Array.prototype.slice.call(document.all);var len = elsArray.length;var fs=document.activeElementvar fsIndex= elsArray.indexOf(fs);var index=0;if(op==&39;){index=fsIndex+1;if(index>=len){index=0;}}else if(op==&39;){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==&39;){index+=1;if(index>=len){index=0;}}else{index-=1;if(index<0){index=len-1;}}}}//监视页面的键盘按下事件 document.onkeydown = function (e) {//用户按下了alt+shift+xif(e.altKey&&e.shiftKey && e.keyCode == 88) {setFocus(&34;, &39;);return false;}else if(e.altKey&& e.keyCode == 88) {//用户按下了alt+xsetFocus(&34;, &39;);return false;}else if(e.altKey&&e.shiftKey && e.keyCode == 90) {//用户按下了alt+shift+zsetFocus(&34;, &39;);return false;}else if(e.altKey&& e.keyCode == 90) {//用户按下了alt+zsetFocus(&34;, &39;);return false;} }})();acc.js代码
本文内容由小涵整理编辑！