JavaScript 按键分组

在 JavaScript 中，我们可以通过监听按键事件来实现各种交互功能，例如游戏操作、快捷键等等。不同的按键可以分为不同的组别，方便我们对其进行分类处理。本文将介绍如何使用 JavaScript 对按键进行分组。

键码

在 JavaScript 中，每个按键都有一个对应的键码，用于表示该按键的唯一标识符。可以使用以下代码监听键盘按键：

document.addEventListener('keydown', function(event) {
    console.log(event.keyCode);
});

在上述代码中，keydown 事件表示按下键盘按键时触发，event.keyCode 表示当前按下的按键的键码。

按键分组

根据键码，我们可以将按键分为以下几组：

字母和数字

字母和数字键的键码范围为 48~90（不区分大小写）。可以使用以下代码判断一个键码是否属于该组：

function isAlphaNumeric(keyCode) {
    return (keyCode >= 48 && keyCode <= 57) ||   // 数字 0~9
           (keyCode >= 65 && keyCode <= 90);     // 字母 A~Z
}

箭头键

箭头键的键码分别为 37（左）、38（上）、39（右）和 40（下）。可以使用以下代码判断一个键码是否属于该组：

function isArrow(keyCode) {
    return keyCode >= 37 && keyCode <= 40;
}

功能键

功能键包括 F1~F12 和其他一些键，例如 Esc、Tab、Caps Lock、Shift、Ctrl、Alt 等。它们的键码不连续，但可以通过以下代码判断一个键码是否属于该组：

function isFunction(keyCode) {
    switch (keyCode) {
        case 8:  // Backspace
        case 9:  // Tab
        case 13: // Enter
        case 16: // Shift
        case 17: // Ctrl
        case 18: // Alt
        case 19: // Pause/Break
        case 20: // Caps Lock
        case 27: // Esc
        case 32: // Space
        case 33: // Page Up
        case 34: // Page Down
        case 35: // End
        case 36: // Home
        case 37: // Left
        case 38: // Up
        case 39: // Right
        case 40: // Down
        case 45: // Insert
        case 46: // Delete
        case 91: // Left Window
        case 92: // Right Window
        case 93: // Select Key
        case 96: // Numpad 0
        case 97: // Numpad 1
        case 98: // Numpad 2
        case 99: // Numpad 3
        case 100: // Numpad 4
        case 101: // Numpad 5
        case 102: // Numpad 6
        case 103: // Numpad 7
        case 104: // Numpad 8
        case 105: // Numpad 9
        case 106: // Multiply
        case 107: // Add
        case 109: // Subtract
        case 110: // Decimal Point
        case 111: // Divide
        case 112: // F1
        case 113: // F2
        case 114: // F3
        case 115: // F4
        case 116: // F5
        case 117: // F6
        case 118: // F7
        case 119: // F8
        case 120: // F9
        case 121: // F10
        case 122: // F11
        case 123: // F12
        case 144: // Num Lock
        case 145: // Scroll Lock
        case 186: // Semi-Colon
        case 187: // Equal Sign
        case 188: // Comma
        case 189: // Dash
        case 190: // Period
        case 191: // Forward Slash
        case 192: // Grave Accent
        case 219: // Open Bracket
        case 220: // Back Slash
        case 221: // Close Bracket
        case 222: // Single Quote
            return true;
        default:
            return false;
    }
}

其他键

除以上三组按键外，剩余的按键可以单独为一组，或按需求进行分组。

小结

以上就是 JavaScript 按键分组的基本方法。通过对按键进行分组，我们可以更好地对按键进行分类处理，从而更加方便地实现各种交互功能。