当前位置：首页 > jquery

jquery键盘事件

2026-02-03 13:54:48jquery

jQuery 键盘事件基础

jQuery 提供了多种键盘事件处理方法，用于捕获用户的键盘操作。常用的键盘事件包括 keydown、keypress 和 keyup。

$(document).keydown(function(event) {
    console.log('按键按下:', event.key);
});

$(document).keypress(function(event) {
    console.log('按键触发:', event.key);
});

$(document).keyup(function(event) {
    console.log('按键释放:', event.key);
});

事件对象属性

键盘事件对象包含多个有用的属性，用于获取按键信息：

$(document).keydown(function(event) {
    console.log('键码:', event.keyCode); // 已废弃，推荐使用 key 或 code
    console.log('按键标识:', event.key);
    console.log('物理按键位置:', event.code);
    console.log('是否按下Ctrl:', event.ctrlKey);
    console.log('是否按下Shift:', event.shiftKey);
});

特定按键检测

可以通过检查 event.key 或 event.keyCode（旧版）来检测特定按键：

$(document).keydown(function(event) {
    if (event.key === 'Enter') {
        console.log('回车键被按下');
    }
    if (event.key === 'Escape') {
        console.log('ESC键被按下');
    }
});

事件委托

对于动态生成的元素，可以使用事件委托：

$(document).on('keydown', '.input-field', function(event) {
    console.log('输入框按键:', event.key);
});

阻止默认行为

某些按键可能触发浏览器的默认行为，可以通过 preventDefault() 阻止：

$(document).keydown(function(event) {
    if (event.key === 'Space') {
        event.preventDefault();
        console.log('空格键默认行为被阻止');
    }
});

组合键检测

可以检测组合键操作：

jquery键盘事件

$(document).keydown(function(event) {
    if (event.ctrlKey && event.key === 's') {
        event.preventDefault();
        console.log('Ctrl+S 被按下');
    }
});

实用示例：输入框字符限制

$('#text-input').keydown(function(event) {
    const maxLength = 10;
    if ($(this).val().length >= maxLength && event.key !== 'Backspace') {
        event.preventDefault();
        console.log('已达到最大字符限制');
    }
});