HTML accesskey属性详解

可能很多小伙伴都不知道，我们只要在HTML代码上设置几个属性，就可以让浏览器支持我们自定义的快捷访问方式，而这个神奇的属性就是本文要介绍的， accesskey 属性，一起来看看吧，希望对大家学习html有所帮助。

　　一、HTML accesskey属性基本知识

　　在HTML4.0.1的时候，HTML accesskey 属性请可以作用在以下元素上：<a> , <area> , <button> , <input> , <label> , <legend> 以及 <textarea> 元素。然后到了HTML5规范的时候， accesskey 属性可以作用在任意的元素上，变成了“全局属性”。

　　例如作用在 元素上：

　　<div accesskey="1">自定义快捷访问</div>

　　这里的属性值 '1' 对应的就是键盘上的数字 1 ，如果是 accesskey="a" 则 'a' 对应的就是键盘上的字母 a 。

　　需要注意的是，虽然说 accesskey 属性值和键盘相对应，但并不是说直接按下这个键，就能快捷访问。浏览器是通过快捷键组合访问的形式进行页面元素的快速访问的。具体的组合方式参见下表：

　　

//zxx: MDN文档显示Opera浏览器是： Shift + Esc 打开可访问的快捷键定义列表，此时可以按下对应的 key 进行访问。但是根据自己的测试， Shift + Esc 打开的是浏览器的任务管理器，和Chrome浏览器一致。我想，MDN文档对Opera的描述应该是Opera还没有采用Blink内核之前的行为吧~

　　虽然说IE浏览器和Chrome浏览器的组合键是一样的，但是其交互行为却和其他浏览器不一样，举个例子：

　　<a href="" accesskey="1">链接</a>

　　在windows操作系统下，按下 Alt + 1 ，IE浏览器只是让 元素获得焦点，但是其他所有浏览器都是直接触发 click 行为。在我看来，IE浏览器的这种行为是不友好的，对于普通的控件元素而言，还可以获得焦点后回车访问，但是，对于类似 这类元素， accesskey 属性几乎是没有任何意义的，因为根本无法通过键盘触发 点击行为。而Chrome等浏览器就没有这个问题，如下HTML：

<div accesskey="3" onClick="this.style.color='red';">测试</div>

　　此时，我在windows操作系统下，按下 Alt + 3 ，结果“测试”二字变成了红色，如下截图：

 

　　说明直接触发了绑定的 click 点击事件。

　　隐藏的元素能否可以触发accesskey快捷访问？

　　一个元素，如果CSS display 属性的计算值是 none ，是无法通过Tab键进行索引聚焦的。那设置的 accesskey 快捷访问是否可以访问呢？

根据我的测试，Chrome浏览器和Firefox浏览器是可以的，元素即使隐藏，只要设置了 accesskey 快捷访问，按下对应组合键的时候就能触发 click 行为。例如：

<a href="" accesskey="1" hidden>链接</a>

　　在windows操作系统Chrome浏览器下，按下 Alt + 1 ，页面会直接刷新。

　　但是对于IE浏览器，那就比较惨了，由于隐藏的元素是不能被 focus 聚焦的，于是 accesskey快捷访问也跟着一起完蛋了，因为IE的组合键触发的只是 focus 行为。

　　多个元素使用相同的accesskey属性值会怎样？

　　如下测试代码：

<div accesskey="1" tabindex="0" onClick="this.style.color='red';">测试1</div>

<div accesskey="1" tabindex="0" onClick="this.style.color='red';">测试2</div>

　　在Chrome浏览器下，上面一行 的 accesskey 属性设置会被忽略，作用的是后来居上的元素。

　　在Firefox浏览器下（版本53），则是两败俱伤，两行 进行快捷键匹配的时候都不能触发click 点击事件，变成了单纯的 focus 索引，行为表现的和IE浏览器一样；

　　在IE edge下，原本就不支持 click 点击事件，自然现在也不支持，使用对应的组合快捷访问的行为也是单纯的依次 focus 索引，如下图示意：

 

 

　　从上面的测试结果可以看出， accesskey 属性值相同是一个比较严重的问题，应当极力避免。

 

来源：网络