HTML - DOM 元素 accesskey 属性

accessKey 属性允许您为网页上的元素分配键盘快捷键，此快捷键使您可以快速激活或访问该元素。

语法

设置 access key

element.accessKey = keyboard_Key

获取 access key

element.accessKey

属性值

值	描述
keyboard_Key	指定用作元素快捷键的键。

返回值

此属性返回一个字符串，其中包含与元素的 accessKey 属性关联的快捷键。

HTML DOM 元素“accessKey”属性示例

以下是一些示例，展示了 HTML DOM 元素 accessKey 属性在各种场景中的各种用例。

向标签元素添加 accessKey

此示例包含一个分配了 access key 的标签元素，允许用户通过按“Alt + U”快速将焦点放在相应的输入字段上。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>Label Example with accessKey</title>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>accessKey Property</h2>
    <p>
        Pressing Alt+W will let you focus on the 
        input field.
    </p>
    <form>
        <label for="user" id="userL">Username:</label>
        <input type="text" id="user"name="user"required>
        <br>
    </form>
    
    <script>
        document.addEventListener('keydown',
        function(event){
                if(event.altKey&&event.key.toLowerCase()===
                'w'){
                event.preventDefault();  
                
                const l=document.getElementById('userL');
                const i=document.getElementById('user');
                
                // Set accessKey property dynamically
                l.accessKey = 'w';       
                i.focus();
            }
        });
    </script>
</body>

</html>

带有 Access Keys 的导航链接

此示例展示了一个导航菜单，其中每个链接都分配了 access key，允许用户通过按 Alt + access key 快速导航到网页的不同部分。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>Navigation with accessKey</title>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>accessKey Property</h2>
    <p>
        Press<kbd>Alt</kbd>+<kbd>K</kbd>,<kbd>Alt</kbd>
        + <kbd>A</kbd>, or <kbd>Alt</kbd> + <kbd>C</kbd>
        to quickly focus on Home,About Us,or Contact Us 
        links respectively.
    </p>
    
    <ul>
        <li>
            <a href="#home"accesskey="K" id="hL">Home</a>
        </li>
        <li>
            <a href="#about"accesskey="A"id="hL">About Us
            </a>
        </li>
        <li>
            <a href="#contact" accesskey="C"
            id="contactLink">Contact Us</a>
        </li>
    </ul>
    
    <script>
        let key = document.getElementById
        ("hLink").accessKey;
        document.addEventListener('keydown', function
        (event) {
            key = event.altKey && key === "K" ||      
            key === "A" || key === "C" ? key : null;
            if (key) {
                event.preventDefault();
                const link = document.querySelector
                
                (`[accesskey="${key}"]`);
                if (link) {
                    link.focus();
                }
            }
        });
    </script>
</body>

</html>

按 Access Key 激活操作

此示例添加了一个按钮，单击或按下 access key (Alt+M) 时（为用户添加 access key 快捷键以添加操作）将打开一个模式窗口。

<!DOCTYPE html>
<html lang="en">
<head>  
    <title>Modal Example</title>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>accessKey Property</h2>
    <p>
        Press<kbd>Alt + M</kbd> to open the modal window!
    </p> 

    <button id="modalButton" onclick="openModal()">
        Open Modal
    </button>

    <div id="myModal"class="modal"style="display:none;">
        <p>This is a modal window.</p>
    </div>

    <script>
        // Assign access key "M" dynamically  
        document.getElementById("modalButton").accessKey 
        = "M";
        
        function openModal() {
            document.getElementById
            ("myModal").style.display = "block";
        }
    </script>
</body>

</html>

支持的浏览器

属性
accessKey	是	是	是	是	是

html_dom_element_reference.htm

打印页面