HTML - accesskey 属性

HTML 的 **accesskey** 属性是一个全局属性，它提供了一个提示，用于为当前元素生成键盘快捷键。

accesskey 属性依赖于浏览器。它可能因浏览器而异。并支持所有 HTML 标签。属性值必须是单个字符，例如字母或数字。在 HTML5 中，accesskey 属性可以与任何标签一起使用，但在 HTML4.1 中，accesskey 属性只能与少数标签一起使用，包括 **<a>**、**<area>**、**<button>**、**<input>**、**<label>**、**<legend>** 和 **<textarea>**。

语法

<Tag accesskey  = "single_character">

应用于

几乎所有 HTML 标签都支持使用 accesskey 属性。

使用访问键的快捷方式

下表描述了使用访问键的快捷方式

浏览器	Windows	Mac	Linux
Google chrome	Alt + single_char	Command + Alt + single_char	Alt + single_char
Mozilla Firefox	Alt + Shift + single_char	Command + Alt + single_char	Alt + Shift + single_char
Internet Explorer	Alt + single_char	NA	NA
Safari	Alt + single_char	Command+Alt+single_char	NA
Opera 15+	Alt + single_char	Command+Alt+single_char	Alt + single_char

下表描述了元素的激活方式

浏览器	激活
Google chrome	将激活具有 accesskey 的最后一个元素。
Mozilla Firefox	将激活具有 accesskey 的下一个元素。
Internet Explorer	将激活具有 accesskey 的下一个元素。
Safari	将激活具有 accesskey 的最后一个元素。
Opera 15+	将激活具有 accesskey 的第一个元素。

HTML accesskey 属性示例

下面的示例将说明 HTML accesskey 属性，以及我们应该在哪里以及如何使用此属性！

使用 accesskey 属性为超链接定义快捷方式

在以下示例中，我们创建了一个 HTML 文档，并使用 accesskey 属性定义了访问外部网页的快捷方式。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>HTML accesskey Attribute</title>
    <style>
        .navbar {
            background-color: #333;
            overflow: hidden;
        }

        .navbar a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
        }

        .navbar a:hover {
            background-color: #ddd;
            color: black;
        }
    </style>
</head>

<body>
    <h1>Accesskey Attribute Example</h1>
    <p>Use the following access keys to navigate quickly:</p>
    <ul>
        <li>
            <strong>Alt + H</strong> (Windows) or 
            <strong>Ctrl + Option + H</strong> (Mac) - Go to HTML tutorial
        </li>
        <li>
            <strong>Alt + C</strong> (Windows) or 
            <strong>Ctrl + Option + C</strong> (Mac) - Go to CSS tutorial
        </li>
        <li>
            <strong>Alt + P</strong> (Windows) or 
            <strong>Ctrl + Option + P</strong> (Mac) - Go to PHP tutorial
        </li>
    </ul>
    <h3>Select tutorials or press shortcut....</h3>
    <nav class="navbar">
        <a href="/html/index.htm" accesskey="h">HTML</a>
        <a href="/css/index.htm" accesskey="c">CSS</a>
        <a href="/php/index.htm" accesskey="p">PHP</a>
    </nav>
</body>

</html>

使用 accesskey 属性聚焦输入标签

此处 accesskey 与 input 标签一起使用，以更改不同输入元素的焦点。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>HTML accesskey Attribute</title>
</head>

<body>

    <h2>Input Field with Accesskey</h2>
    <p>Use the following access keys to navigate quickly:</p>
    <ul>
        <li>
            <strong>Alt + N</strong> (Windows) or 
            <strong>Ctrl + Option + N</strong> (Mac) - Focus Name input
        </li>
        <li>
            <strong>Alt + M</strong> (Windows) or 
            <strong>Ctrl + Option + M</strong> (Mac) - Focus Message area
        </li>
    </ul>
    <br><br>
    <form action="/html/index.htm">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" accesskey="n" 
               placeholder="Enter your name" autofocus>
        <br><br>

        <label for="message">Message:</label>
        <br>
        <textarea id="message" name="message" rows="4" cols="50" 
               accesskey="m" placeholder="Enter your message">
   </textarea>
        <br><br>
        <button type="submit">Submit</button>
    </form>

</body>

</html>

支持的浏览器

属性
accesskey	是	是	是	是	是

html_attributes_reference.htm

打印页面