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

本文概述

• 浏览器支持
• 使用accesskey属性

你的应用程序是否实现键盘快捷键？当然, 要解决此必要性, 你可能已经使用JavaScript对整个文档实施了keydown事件侦听器：

// Register the key handler 
document.addEventListener('keyup', function(e){
    // This would be triggered by pressing CTRL + A
    if (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);

但是, 根据你使用的条件, 这种方法并不总是必需的。许多Web开发人员都不知道的有用属性是DOM元素的有趣的accesskey属性。 accesskey全局属性提供了一个提示, 用于为DOM元素生成键盘快捷键(在每个浏览器和操作系统上都不同)。此属性包含一个Unicode字符。浏览器使用计算机键盘布局上存在的第一个字符。

浏览器支持

激活访问密钥的操作取决于浏览器及其平台：

使用accesskey属性

要在标记中定义键, 请在accesskey属性中添加会触发元素主要操作的unicode键代码(通常单击)：

<!-- 
    Redirect to the Our Code World website 
    clicking on the Link or simply pressing
    ALT + 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="Send Form" accesskey="s"/>

    <!-- Reset the form with the button or pressing ALT + R -->
    <input type="reset" value="Reset Form" accesskey="r"/>
</form>

用户填写表格后, 可以按ALT + A重置它。

编码愉快！