当前位置：首页 > jquery

jquery键盘事件

2026-04-08 07:04:52jquery

jQuery键盘事件概述

jQuery提供了多种键盘事件处理方法，用于响应用户的键盘操作，包括按键按下、释放和长按等场景。以下是常见的键盘事件及使用方法。

常用键盘事件类型

keydown
当键盘按键被按下时触发，适用于捕获任何按键的初始动作。
```
$(selector).keydown(function(event) {
    console.log("按键按下:", event.key);
});
```

keyup
当键盘按键被释放时触发，通常用于结束动作的检测。

$(selector).keyup(function(event) {
    console.log("按键释放:", event.keyCode);
});

keypress
在按键按下并产生字符时触发（如字母、数字），不适用于功能键（如Shift、Ctrl）。
```
$(selector).keypress(function(event) {
    console.log("字符输入:", String.fromCharCode(event.which));
});
```

事件对象常用属性

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

示例：检测回车键

$(document).keypress(function(event) {
    if (event.which === 13) {
        alert("回车键被按下");
    }
});

动态绑定与解绑事件

动态绑定
使用on()方法绑定键盘事件：

jquery键盘事件

$(selector).on("keydown", function(event) {
    // 事件处理逻辑
});

解绑事件
使用off()移除事件监听：
```
$(selector).off("keydown");
```

实际应用示例

限制输入框为数字

$("#inputField").keypress(function(event) {
    const charCode = event.which ? event.which : event.keyCode;
    if (charCode < 48 || charCode > 57) {
        event.preventDefault(); // 阻止非数字输入
    }
});

组合键触发功能

$(document).keydown(function(event) {
    if (event.ctrlKey && event.key === "s") {
        event.preventDefault();
        console.log("Ctrl+S 保存操作");
    }
});