[jQuery教程]jQuery键盘事件(十一)

[jQuery 教程]jQuery 键盘事件(十一)

介绍获取键盘的事件,包含按键按下、抬起等事件的使用。

jQuery 键盘事件之 keydown()与 keyup()事件

鼠标有 mousedown,mouseup 之类的事件,这是根据人的手势动作分解的 2 个触发行为。相对应的键盘也有这类事件,将用户行为分解成 2 个动作,键盘按下与松手,针对这样的 2 种动作,jQuery 分别提供了对应 keydown 与 keyup 方法来监听

keydown 事件:

当用户在一个元素上第一次按下键盘上字母键的时候,就会触发它。使用上非常简单,与基本事件参数处理保持一致,这里使用不在重复了,列出使用的方法。

//直接绑定事件
$elem.keydown( handler(eventObject) )
//传递参数
$elem.keydown( [eventData ], handler(eventObject) )
//手动触发已绑定的事件
$elem.keydown()

keyup 事件:

当用户在一个元素上第一次松手键盘上的键的时候,就会触发它。使用方法与 keydown 是一致的只是触发的条件是方法的

注意:

  • keydown 是在键盘按下就会触发
  • keyup 是在键盘松手就会触发
  • 理论上它可以绑定到任何元素,但 keydown/keyup 事件只是发送到具有焦点的元素上,不同的浏览器中,可获得焦点的元素略有不同,但是表单元素总是能获取焦点,所以对于此事件类型表单元素是最合适的。

jQuery 键盘事件之 keypress()事件

在 input 元素上绑定 keydown 事件会发现一个问题:
每次获取的内容都是之前输入的,当前输入的获取不到
keydown 事件触发在文字还没敲进文本框,这时如果在 keydown 事件中输出文本框中的文本,得到的是触发键盘事件前的文本,而 keyup 事件触发时整个键盘事件的操作已经完成,获得的是触发键盘事件后的文本。

当浏览器捕获键盘输入时,还提供了一个 keypress 的响应,这个跟 keydown 是非常相似,这里使用请参考 keydown 这一节,具体说说不同点。

keypress 事件与 keydown 和 keyup 的主要区别:

  • 只能捕获单个字符,不能捕获组合键
  • 无法响应系统功能键(如 delete,backspace)
  • 不区分小键盘和主键盘的数字字符

总而言之,

KeyPress 主要用来接收字母、数字等 ANSI 字符,而 KeyDown 和 KeyUP 事件过程可以处理任何不被 KeyPress 识别的击键。诸如:功能键(F1-F12)、编辑键、定位键以及任何这些键和键盘换档键的组合等。

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » [jQuery教程]jQuery键盘事件(十一)

发表回复