首页 > 精选资讯 > 严选问答 >

问 jquery.keypress 键盘按压事件方法详解

2026-11-08 16:51:06
最佳答案

答

jquery.keypress 是 jQuery 提供的键盘事件绑定方法,作用是监听元素上键盘按键按下并产生字符输入的时候触发回调函数,这个方法属于 jQuery 事件体系里面的键盘事件,和 keydown keyup 是配套的三个键盘事件,很多前端开发者会混淆三者触发时机,keypress 重点识别可打印字符,也就是字母数字标点这类可以输出到输入框的字符,像 shift ctrl alt 这种功能按键,还有方向键 tab 键,通常不会触发 keypress,这个特性就是 keypress 最核心的特点,jQuery 官方后续已经标记 keypress 属于弃用事件,新项目推荐改用 keydown 或者 input 事件,但是大量老项目历史代码里面仍然在大量使用 jquery.keypress,学习的时候既要掌握它的用法,也要清楚它的兼容缺陷和替代方案,jquery.keypress 可以直接绑定回调,也可以用来触发该事件,支持事件对象 event,通过 event.which 属性获取按键编码,用来判断用户按下的是哪一个按键。

基础语法说明

第一种写法 绑定事件

选择器.keypress (function (event){ 业务代码 })

第二种写法 主动触发事件

选择器.keypress ()

第三种写法 使用 on 方法等价绑定

选择器.on ("keypress", function (event){})

三个键盘事件对比表

事件名称触发时机是否识别功能键备注
keypress按键按下并且生成可打印字符一般不识别 shift 方向键等功能键jQuery 已弃用
keydown按键按下瞬间识别全部按键推荐替代方案
keyup按键松开瞬间识别全部按键按键抬起之后执行逻辑

核心属性 event.which

jquery.keypress 回调里面的 event.which 是最常用属性,jQuery 对不同浏览器做了兼容处理,统一封装成 which,不用再单独判断 event.keyCode,开发的时候通过判断 which 的数值,就能识别按下的按键,比如回车键的编码是 13,经常在输入框监听回车提交,这也是 jquery.keypress 非常经典的应用场景。

基础使用示例步骤

第一步 引入 jQuery 库,页面必须加载完成之后再绑定事件,第二步 选中目标元素,一般是 input 输入框,第三步 调用 keypress 绑定回调函数,第四步 在回调里面读取 event.which 判断按键,第五步 编写对应的业务逻辑,比如回车触发搜索,限制只能输入数字,第六步 测试不同按键,确认功能键不会触发 jquery.keypress,验证它的特性。

已知缺陷与兼容问题

第一 浏览器兼容性不一致,部分浏览器对特殊按键的触发表现不一样,标准没有强制统一,第二 不识别很多非打印按键,需要监听方向键 ctrl 这类按键的时候,jquery.keypress 无法满足需求,第三 官方弃用,新版 jQuery 不再推荐继续使用,未来维护老项目的时候,最好逐步迁移到 keydown 或者 input 事件,第四 移动端软键盘触发行为和电脑键盘存在差异,部分移动端浏览器 keypress 触发不稳定。

典型应用场景

输入框回车监听,输入内容字符校验,限制可输入字符类型,表单输入实时校验,这些场景是 jquery.keypress 最常见用途,如果是单纯输入内容变化监听,现代写法优先推荐 input 事件,比 keypress 更加稳定。

综合来说 jquery.keypress 是 jQuery 旧版键盘事件,专门监听可打印字符按压触发,通过 event.which 获取按键编码,但是因为官方弃用加上功能键不触发的限制,新项目优先替换成 keydown 或者 input,老项目维护的时候继续保留也可以正常运行。

【常见问题】

问题 1 jquery.keypress 为什么方向键不会触发

回答 1 jquery.keypress 只会在产生可打印字符的时候触发,方向键属于功能按键,不会生成可打印字符,所以 jquery.keypress 不会响应,需要监听方向键请改用 keydown。

问题 2 jquery.keypress 和 keydown 应该怎么选择

回答 1 如果只需要监听可打印字符,可以继续使用 jquery.keypress,如果需要监听全部按键包括功能键,推荐选择 keydown,而且 jquery.keypress 已经被官方弃用,新项目优先选 keydown。

问题 3 jquery.keypress 获取按键编码用哪个属性

回答 1 jquery.keypress 回调函数里面使用 event.which 获取按键编码,jQuery 已经做跨浏览器兼容,不需要再单独使用旧的 keyCode 属性。

【免责申明】

本文基于 jQuery 官方文档与前端通用开发知识整理,不同 jQuery 版本和浏览器内核表现存在差异,仅作为前端学习参考,不构成生产项目强制开发规范。