使用 JavaScript 建立鍵盤快捷鍵

Mehvish Ashiq 2023年1月30日 2022年5月10日
  1. 在 JavaScript 中使用純 JavaScript 建立鍵盤快捷鍵
  2. 在 JavaScript 中使用 hotkeys.js 庫建立鍵盤快捷鍵
  3. 在 JavaScript 中使用 jQuery 庫建立鍵盤快捷鍵
  4. 在 JavaScript 中使用 mousetrap.js 庫建立鍵盤快捷鍵
使用 JavaScript 建立鍵盤快捷鍵

你想使用鍵盤快捷鍵為你的部落格或網站增添趣味嗎?本教程教你如何使用 JavaScript 建立鍵盤快捷鍵。

使用者可以使用一個或多個屬性,包括 shiftKeyaltKeyctrlKeykey 來獲取按下的鍵的值。

我們可以使用下面列出的方法。

  1. 純 JavaScript
  2. 使用 hotkeys.js
  3. 使用 jQuery 庫
  4. 使用 mousetrap.js

讓我們從純 JavaScript 開始。

在 JavaScript 中使用純 JavaScript 建立鍵盤快捷鍵

HTML 程式碼:

<!DOCTYPE html>
<html>
    <head>
        <title>Pure JS to Create Keyboard Shortcuts</title>
        <script src="./script.js"></script>
    </head>
    <body>
        <p>Press Alt+C</p>
    </body>
</html>

JavaScript 程式碼:

document.addEventListener("keydown", function(e) {
    if (e.altKey && e.code === "KeyC"){
        alert('Alt + C is pressed!');
        e.preventDefault();
    }
});

這個例子使用 addEventListener() 來監聽名為 keydown 的事件。為了實現 Alt+C 鍵盤事件快捷鍵,我們使用 KeyboardEvent.altKeyKeyboardEvent.code

名為 KeyboardEvent.altKey 的只讀屬性是一個布林結果,用於判斷 Alt 是否被按下。它在按下鍵時返回 true,否則返回 false

KeyboardEvent.code 顯示鍵盤的物理鍵。

最後,如果檢測到預期的按鍵,程式會使用 alert() 顯示一條訊息,並且 preventDefault() 函式會停止事件(它只能取消或停止可取消的事件)。我們也可以使用 KeyboardEvent.key 代替 KeyboardEvent.code;請參見以下示例。

JavaScript 程式碼:

document.addEventListener("keydown", function(e) {
    if (e.altKey && (e.key === 'c' || e.key === 'C')){
        alert('Alt + C is pressed!');
        e.preventDefault();
    }
});

在 JavaScript 中使用 hotkeys.js 庫建立鍵盤快捷鍵

HTML 程式碼:

<!DOCTYPE html>
<html>
    <head>
        <title>Pure JS to Create Keyboard Shortcuts</title>
        <script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js">
        </script>
        <script src="./script.js"></script>
    </head>
    <body>
        <p>Press Alt+C</p>
    </body>
</html>

JavaScript 程式碼:

hotkeys('alt+c', function(event,handler) {
    alert('Alt + c is pressed!');
    event.preventDefault();
});

我們正在使用 hotkeys.js 庫為 Alt+C 建立鍵盤快捷鍵。要使用它,你必須在你的機器上安裝 Node.js 或通過 <script> 標籤包含它。

我們還可以將它用於多個鍵盤快捷鍵,如下所示。

HTML 程式碼:

<!DOCTYPE html>
<html>
    <head>
        <title>Pure JS to Create Keyboard Shortcuts</title>
        <script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js">
        </script>
        <script src="./script.js"></script>
    </head>
    <body>
        <h1>You Can Press the Following Keyboard Shortcuts</h1>
        <ul>
            <li>Press Ctrl+A</li>
            <li>Press Ctrl+B</li>
            <li>Press A</li>
            <li>Press B</li>
        </ul>
    </body>
</html>

JavaScript 程式碼:

hotkeys('ctrl+a,ctrl+b,a,b', function (event, handler){
    switch (handler.key) {
        case 'ctrl+a':
            alert('You pressed Ctrl+A');
            break;
        case 'ctrl+b':
            alert('You pressed Ctrl+B');
            break;
        case 'a':
            alert('You pressed A!');
            break;
        case 'b':
            alert('You pressed B!');
            break;
        default: alert(event);
    }
});

在 JavaScript 中使用 jQuery 庫建立鍵盤快捷鍵

HTML 程式碼:

<!DOCTYPE html>
<html>
    <head>
        <title>Pure JS to Create Keyboard Shortcuts</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">			</script>
        <script src="./script.js"></script>
    </head>
    <body>
        <p>Press Alt+X</p>
    </body>
</html>

JavaScript 程式碼:

$(document).keydown(function(e) {
    if (e.altKey && e.which === 88){
        alert('You pressed Alt + X');
        e.preventDefault();
    }
});

我們使用 jQuery 庫的 keyboard() 函式,當鍵盤按鍵被按下時觸發 keydown 事件。KeyboardEvent.which 具有數值並表示按下了哪個滑鼠按鈕或鍵盤鍵。

請記住,你可能必須從 event.whichevent.keyCode 中選擇任何一個,這取決於你的瀏覽器支援的內容。

在 JavaScript 中使用 mousetrap.js 庫建立鍵盤快捷鍵

HTML 程式碼:

<!DOCTYPE html>
<html>
    <head>
        <title>Pure JS to Create Keyboard Shortcuts</title>
        <script
		src="https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.6.3/mousetrap.min.js">
        </script>
        <script src="./script.js"></script>
    </head>
    <body>
        <p>Press Alt+C</p>
    </body>
</html>

JavaScript 程式碼:

Mousetrap.bind(['alt+c'], function(){
    alert('You pressed Alt+C');
    return false;
})

現在,我們使用 mousetrap.js 庫來處理鍵盤快捷鍵。如果你有 Node.js,我們可以使用它,或者通過 <script> 元素手動新增它。

你可以這裡詳細瞭解。

Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook