accesskey属性(便捷键、又称热键)【变更属性

accesskey="任意的值"

Accesskey属性指定键盘上的键用于代表快捷键,即:热键。当单击键盘上的快捷键(热键)时,光标就会跳到该当元素。或者按下快捷键(热键)执行定义的命令。HTML5中的命令一般为抽象化的按钮或者链接,所以a元素的链接也是命令,当a元素中指定了accesskey属性,只要按下键盘上指定的快捷键(热键),就会跳转到指定网页。

该内容属性经常使用于智能手机网站的导航中。

实际上,调用accesskey的方法和动作,会因为OS或者浏览器的不同而不同,例如,Windows环境中,单独按定义了accesskey属性的快捷键,基本上不会有什么动作。还需要与其他热键配合使用。例如上例中,定义的快捷键为1,但是在Chorme35浏览器上需要同时按下“Alt+1”才能实现网页跳转。Firefoxl浏览器上需要同时按下“Alt+Shift+1”。

不同 OS上热键的组合
浏览器 Windows Linux Mac
IE [Alt] + accesskey N/A
Chrome [Alt] + accesskey [Alt] + accesskey [Control] [Alt] + accesskey
Firefox [Alt] [Shift] + accesskey [Alt] [Shift] + accesskey [Control] [Alt] + accesskey
Safari [Alt] + accesskey N/A [Control] [Alt] + accesskey
Opera Opera15以上版本 :[Alt] + accesskey
Opera12.1以下版本: [Shift] [Esc] + accesskey

HTML5z中的accesskey属性可以设定多个候补热键(优先使用前面的热键)。定义多个候补热键(快捷键)时,热键之间用半角逗号分隔。

多个元素拥有相同热键时,不同浏览器上的动作:

  • IE、Firefox:按下热键时,下一个元素被激活
  • Chrome、Safari:按下热键时,最后一个元素被激活
  • Opera:按下热键时,第一个元素被激活

HTML4.01与HTML5中accesskey属性的差异

使用例

<nav>

<ul>

<li><a href="material/product.html" accesskey="1" title="商品一览">商品一览</a></li>

<li><a href="#" accesskey="2" title="购物车">购物车</a></li>

<li><a href="#" accesskey="3" title="咨询">咨询</a></li>

</ul>

</nav>

浏览器上的显示结果↓

定义多数键使用例

<a href="material/product.html" accesskey="s 1" title="商品一览">商品一览</a>

浏览器上的显示结果↓

HTML5标准中,如果使用的设备不支持定义的快捷键,则无视,直到找到支持的快捷键。如上例中,当手机只支持数字键,就会无视“s”键,采用“1”键。

浏览器支持情况

属性
accesskey 9.0 11.0 3.6 6.1 23

关联内容