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

列印頁面