可能很多小伙伴都不知道,我们只要在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 属性值相同是一个比较严重的问题,应当极力避免。
来源:网络