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

列印頁面