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


Posted in jQuery onOctober 23, 2019

事件的定义

完整的 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 键盘事件函数的全部知识点内容,更多内容可以到相关栏目查找。

jQuery 相关文章推荐
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
jquery+css实现侧边导航栏效果
Jun 12 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
jquery获取transform里的值实现方法
Dec 12 jQuery
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
如何基于jQuery实现五角星评分
Sep 02 jQuery
Jquery+javascript实现支付网页数字键盘
Dec 21 jQuery
jQuery实现全选按钮
Jan 01 jQuery
jQuery实现轮播图源码
Oct 23 #jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 #jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 #jQuery
jQuery/JS监听input输入框值变化实例
Oct 17 #jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 #jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 #jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 #jQuery
You might like
ThinkPHP中使用ajax接收json数据的方法
2014/12/18 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
php metaphone()函数的定义和用法
2016/05/15 PHP
php使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
javascript编程起步(第六课)
2007/02/27 Javascript
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
javascript克隆对象深度介绍
2012/11/20 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
2013/07/16 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
2014/09/03 Javascript
js中利用tagname和id获取元素的方法
2016/01/03 Javascript
JS动态增删表格行的方法
2016/03/03 Javascript
JavaScript中的工厂函数(推荐)
2017/03/08 Javascript
vue登录注册及token验证实现代码
2017/12/14 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
2020/08/03 Javascript
[01:04:31]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第二场 1月8日
2021/03/11 DOTA
Python的print用法示例
2014/02/11 Python
Django框架中数据的连锁查询和限制返回数据的方法
2015/07/17 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
Tensorflow 利用tf.contrib.learn建立输入函数的方法
2018/02/08 Python
基于TensorFlow常量、序列以及随机值生成实例
2020/01/04 Python
关于tf.TFRecordReader()函数的用法解析
2020/02/17 Python
Django media static外部访问Django中的图片设置教程
2020/04/07 Python
带你学习Python如何实现回归树模型
2020/07/16 Python
Python基于tkinter canvas实现图片裁剪功能
2020/11/05 Python
Pureology官网:为染色头发打造最好的产品
2019/09/13 全球购物
潘多拉珠宝美国官方网站:Pandora US
2020/06/18 全球购物
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
应届毕业生求职信范文
2014/07/07 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
新员工辞职信范文
2015/05/12 职场文书
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript
Javascript中async与await的捕捉错误详解
2022/03/03 Javascript
解决 Redis 秒杀超卖场景的高并发
2022/04/12 Redis