当前位置：首页 > jquery

jquery 键盘

2026-03-17 16:14:14jquery

jQuery 键盘事件处理

jQuery 提供了多种方法来处理键盘事件，包括按键按下（keydown）、按键释放（keyup）和字符输入（keypress）。以下是常见的键盘事件处理方法：

keydown 事件 当用户按下键盘上的任意键时触发，无论是否产生字符。适用于检测功能键（如 Esc、Ctrl 等）。

$(document).keydown(function(event) {
    console.log('Key pressed:', event.key);
    console.log('Key code:', event.keyCode);
});

keyup 事件 当用户释放键盘上的键时触发。常用于检测按键释放后的动作。

$(document).keyup(function(event) {
    if (event.key === 'Enter') {
        console.log('Enter key released');
    }
});

keypress 事件 当用户按下并产生字符时触发（不适用于功能键）。适合处理字符输入。

$(document).keypress(function(event) {
    console.log('Character input:', String.fromCharCode(event.which));
});

常用属性和方法

event.key：返回按键的字符串表示（如 "a"、"Enter"）。
event.keyCode 或 event.which：返回按键的 Unicode 值（已弃用，推荐使用 event.key）。
event.ctrlKey、event.shiftKey：布尔值，检测是否同时按下了 Ctrl 或 Shift 键。

$(document).keydown(function(event) {
    if (event.key === 'a' && event.ctrlKey) {
        console.log('Ctrl + A pressed');
    }
});

阻止默认行为

使用 event.preventDefault() 可以阻止按键的默认行为（如阻止 Enter 键提交表单）。

$(document).keydown(function(event) {
    if (event.key === 'Enter') {
        event.preventDefault();
        console.log('Enter key default action prevented');
    }
});

动态绑定与解绑

通过 .on() 和 .off() 动态绑定或解绑键盘事件。

// 绑定事件
$(document).on('keydown', function(event) {
    console.log('Keydown event bound dynamically');
});

// 解绑事件
$(document).off('keydown');

实际应用示例

检测方向键操作：

jquery 键盘

$(document).keydown(function(event) {
    switch(event.key) {
        case 'ArrowUp':
            console.log('Up arrow pressed');
            break;
        case 'ArrowDown':
            console.log('Down arrow pressed');
            break;
        case 'ArrowLeft':
            console.log('Left arrow pressed');
            break;
        case 'ArrowRight':
            console.log('Right arrow pressed');
            break;
    }
});