jquery 键盘事件 keypress() keydown() keyup()用法总结

所属分类: 网络编程 / JavaScript 阅读数: 834
收藏 0 赞 0 分享

事件的定义

完整的 key press 过程分为两个部分:1. 按键被按下;2. 按键被松开。

当按钮被按下时,发生 keydown 事件。

keydown() 方法触发 keydown 事件,或规定当发生 keydown 事件时运行的函数。

当按钮被松开时,发生 keyup 事件。它发生在当前获得焦点的元素上。

keyup() 方法触发 keyup 事件,或规定当发生 keyup 事件时运行的函数。

keypress 事件与 keydown 事件类似。当按钮被按下时,会发生该事件。它发生在当前获得焦点的元素上。

不过,与 keydown 事件不同,每插入一个字符,就会发生 keypress 事件。

keypress() 方法触发 keypress 事件,或规定当发生 keypress 事件时运行的函数。

使用情况:

which事件

$("input").keydown(function(event){
 $("div").html("Key: " + event.which);
});

which 属性指示按了哪个键或按钮。(event.keyCode和event.charCode进行了标准化。)

1.理论上它可以绑定到任何元素,但keydown/keyup事件只是发送到具有焦点的元素上,不同的浏览器中,可获得焦点的元素略有不同,但是表单元素总是能获取焦点,所以对于此事件类型表单元素是最合适的

2.在input元素上绑定keydown事件时获取的内容都是之前输入的,当前输入的获取不到

3.keydown()事件触发在文字还没有敲进文本框,这时如果在kevdown事件中输入文本框中的文本,得到的是触发键盘事件前的文本

4.keyup()事件触发时整个键盘事件的操作已经完成,获得的是触发键盘事件后的文本

5.keypress()捕获浏览器键盘输入的时候

6.keypress事件与keydown和keyup的主要区别(所以使用组合键时需要使用keydown事件兼容)

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

7.KeyPress主要用来接收字母、数字等ANSI字符

8.KeyDown 和 KeyUP 事件过程可以处理任何不被 KeyPress 识别的击键,如:功能键(F1-F12)、编辑键、定位键以及任何这些键和键盘换档键的组合等

在使用键盘的时候通常会用到 Ctrl+shift+alt 类似的组合键功能,通过 keyup 事件能够处理(说明一下这里不用keydown事件:因为在判定keydown 的时候,ctrl、shift、和Alt属于一直按下状态然后再加另外一个键是不能准确捕获组合键,所以使用keydown 是不能准确判断的,要通过keyup事件来判定)

以上就是本次介绍的关于jquery 键盘事件函数的全部知识点内容,更多内容可以到相关栏目查找。

更多精彩内容其他人还在看

javascript if条件判断方法小结

今天在为网站增加一些代码功能的时候,需要用到if条件判断,发现简写方法忘了,这里特整理下
收藏 0 赞 0 分享

javascript教程:关于if简写语句优化的方法

这篇文章主要介绍了js中if简写语句优化的方法,需要的朋友可以参考下
收藏 0 赞 0 分享

wap浏览自动跳转到wap页面的js代码

这篇文章主要介绍了如何让用户输入wap手机网站的网址时自动跳转到wap网站,需要的朋友可以参考下
收藏 0 赞 0 分享

jqGrid读取选择的多行的某个属性代码

这篇文章主要介绍了jqGrid读取选择的多行的某个属性实现代码,需要的朋友可以参考下
收藏 0 赞 0 分享

让alert不出现弹窗的两种方法

这篇文章主要介绍了让alert不出现弹窗的两种方法,需要的朋友可以参考下
收藏 0 赞 0 分享

JSON+HTML实现国家省市联动选择效果

实现国家省市联动的方法有很多,本文要为大家介绍的JSON+HTML如何实现,需要的朋友可以参考下
收藏 0 赞 0 分享

javascript的alert box在java中如何显示多行

这篇文章主要介绍了javascript的alert box在java中如何显示多行,需要的朋友可以参考下
收藏 0 赞 0 分享

绑定回车enter事件代码

这篇文章主要介绍了绑定回车enter事件代码,需要的朋友可以参考下
收藏 0 赞 0 分享

Jquery 返回json数据在IE浏览器中提示下载的问题

Jquery 返回json数据,IE浏览器提示下载的问题,当提交完数据后返回的本来是json数据的,在火弧里测试正常,解决方法如下
收藏 0 赞 0 分享

用jquery实现的一个超级简单的下拉菜单

这篇文章主要介绍了用jquery实现的一个超级简单的下拉菜单,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多