HTML5 Accesskey属性(你可能不需要JavaScript即可添加键盘快捷键)

本文概述

  • 浏览器支持
  • 使用accesskey属性
你的应用程序是否实现键盘快捷键?当然, 要解决此必要性, 你可能已经使用JavaScript对整个文档实施了keydown事件侦听器:
// Register the key handler document.addEventListener('keyup', function(e){// This would be triggered by pressing CTRL + Aif (e.ctrlKey & & e.keyCode == 65) {window.location.href = "http://ourcodeworld.com"; }// Or with ALT + A//if (e.altKey & & e.keyCode == 65) {//window.location.href = "http://ourcodeworld.com"; //}}, false);

【HTML5 Accesskey属性(你可能不需要JavaScript即可添加键盘快捷键)】但是, 根据你使用的条件, 这种方法并不总是必需的。许多Web开发人员都不知道的有用属性是DOM元素的有趣的accesskey属性。 accesskey全局属性提供了一个提示, 用于为DOM元素生成键盘快捷键(在每个浏览器和操作系统上都不同)。此属性包含一个Unicode字符。浏览器使用计算机键盘布局上存在的第一个字符。
浏览器支持激活访问密钥的操作取决于浏览器及其平台:
  视窗 的Linux 苹果电脑
火狐浏览器 Alt + Shift +键 在Firefox 14或更高版本上, 按Control + Alt +键在Firefox 13或更低版本上, 按Control +键
IE浏览器 Alt +键 不适用
谷歌浏览器 Alt +键 Ctrl + Alt +键
苹果浏览器 Alt +键 不适用 Ctrl + Alt +键
歌剧 Shift + Esc打开目录列表, 可通过访问键进行访问, 然后可以通过按键选择一个项目
使用accesskey属性要在标记中定义键, 请在accesskey属性中添加会触发元素主要操作的unicode键代码(通常单击):
< !-- Redirect to the Our Code World website clicking on the Link or simply pressingALT + A--> < a href="http://ourcodeworld.com" accesskey="a"> Redirect to Our Code World< /a>

尽管在某些情况下, 你确实确实需要添加事件侦听器原因, 以便在用户触发键组合时执行该功能, 但在其他情况下, 只需正确设置此属性就足够了。例如, 可以通过单击链接元素来实现一个简单的重定向功能。
你甚至可以在< a> 元素的href属性内执行内联JavaScript(不是一个好主意, 而是功能性的):
< a href="javascript:alert('Hello')" accesskey="a"> Say Hello< /a>

在” 标准” 中, 常见的是你可以使用accesskey属性r重置表单:
< form> < input type="text" name="name" /> < input type="text" name="subject" /> < textarea name="description"> < /textarea> < !-- Submit Form with the button or pressing ALT + S --> < input type="submit" value="http://www.srcmini.com/Send Form" accesskey="s"/> < !-- Reset the form with the button or pressing ALT + R --> < input type="reset" value="http://www.srcmini.com/Reset Form" accesskey="r"/> < /form>

用户填写表格后, 可以按ALT + A重置它。
编码愉快!

    推荐阅读