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浏览器的组合键是一样的，但是其交互行为却和其他浏览器不一样，举个例子：

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

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

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

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

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

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

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

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

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

　　如下测试代码：

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

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

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

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

来源：网络

HTML accesskey属性详解相关推荐

【input 标签的 type 属性详解】
input 标签的 type 属性详解 1. input 输入标签的 type 属性 1.1 input 标签的 type类型属性的常用属性值 ⑴ 单行文本框: type="text&qu ...
python中文读音ndarray-numpy中的ndarray方法和属性详解
NumPy数组的维数称为秩(rank),一维数组的秩为1,二维数组的秩为2,以此类推.在NumPy中,每一个线性的数组称为是一个轴(axes),秩其实是描述轴的数量.比如说,二维数组相当于是一个一维数 ...
spring MVC请求处理类注解属性详解
spring MVC请求处理类注解属性详解
Meta http-equiv属性详解
Meta http-equiv属性详解博客分类: Web综合 HTML浏览器IECache搜索引擎 http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮 ...
JavaScript Function.arguments 属性详解
转载自 JavaScript Function.arguments 属性详解 arguments属性是正在执行的函数的内置属性,返回该函数的arguments对象.arguments对象包含了调用 ...
vertical-align属性详解
vertical-align属性详解:http://www.cnblogs.com/wcp-spring/archive/2013/03/04/2942456.html 关于vertical-alig ...
border-sizing属性详解和应用
box-sizing 用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型.它有 content-box . border-box 和 inherit 三种取值. inherit 指的是从父元素继 ...
Flash播放控件属性详解
Flash 播放控件属性详解一.属性篇 1.AlignMode(读写) 语法:AlignMode As Long 说明:对齐方式(与SAlign 属性联动).当控件的长宽比例与影片不一致且WMo ...
android layout_width 属性,android：layout_weight属性详解
在android开发中LinearLayout很常用,LinearLayout的内控件的android:layout_weight在某些场景显得非常重要,比如我们需要按比例显示.android并没用提 ...

HTML accesskey属性详解

HTML accesskey属性详解相关推荐

最新文章

热门文章