如何在 JavaScript 和 jQuery 中綁定箭頭鍵？

JavaScript 和 jQuery 中的按鍵綁定箭頭鍵

增強使用者互動通常需要將功能綁定到特定鍵。箭頭鍵通常用於導航，但將它們整合到 JavaScript 和 jQuery 中可能是一個挑戰。

jQuery 解決方案

雖然 js-hotkey 插件提供了增強的鍵綁定功能，它缺乏對箭頭鍵的支援。然而，jQuery 的 keydown 事件處理程序提供了另一種解決方案。

<code class="js">$(document).keydown(function(e) {
    switch (e.which) {
        case 37: // Left
            // Insert your left arrow key code
            break;
        case 38: // Up
            // Insert your up arrow key code
            break;
        case 39: // Right
            // Insert your right arrow key code
            break;
        case 40: // Down
            // Insert your down arrow key code
            break;
    }
    e.preventDefault();
});</code>

純 JavaScript 解決方案

利用 JavaScript 的 onkeydown 事件是綁定箭頭鍵的另一種方法。

<code class="js">document.onkeydown = function(e) {
    switch (e.which) {
        case 37: // Left
            // Insert your left arrow key code
            break;
        case 38: // Up
            // Insert your up arrow key code
            break;
        case 39: // Right
            // Insert your right arrow key code
            break;
        case 40: // Down
            // Insert your down arrow key code
            break;
    }
    e.preventDefault();
};</code>

跨瀏覽器相容性

為了相容於IE8 等舊版瀏覽器，請新增e = e ||視窗.事件; switch(e.which || e.keyCode) { 在函數體之前。

現代化解決方案

KeyboardEvent.which 現已棄用。更現代的方法是使用 KeyboardEvent.key:

<code class="js">document.addEventListener('keydown', function(e) {
    switch (e.key) {
        case 'ArrowLeft':
            // Insert your left arrow key code
            break;
        case 'ArrowUp':
            // Insert your up arrow key code
            break;
        case 'ArrowRight':
            // Insert your right arrow key code
            break;
        case 'ArrowDown':
            // Insert your down arrow key code
            break;
    }
    e.preventDefault();
});</code>

以上是如何在 JavaScript 和 jQuery 中綁定箭頭鍵？的詳細內容。更多資訊請關注PHP中文網其他相關文章！