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 Ajax 异步操作之动态添加节点功能
May 24 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
jquery实现直播视频弹幕效果
Feb 25 jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 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
php+mysqli数据库连接的两种方式
2015/01/28 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
thinkphp5框架前后端分离项目实现分页功能的方法分析
2019/10/08 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
return false;和e.preventDefault();的区别
2010/07/11 Javascript
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
2011/04/12 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
自动设置iframe大小的jQuery代码
2013/09/11 Javascript
JS中的数组的sort方法使用示例
2014/01/22 Javascript
JQUERY 设置SELECT选中项代码
2014/02/07 Javascript
jQuery实现鼠标可拖动调整表格列宽度
2014/05/26 Javascript
JQuery核心函数是什么及使用方法介绍
2016/05/03 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
2016/07/22 Javascript
angular 实现下拉列表组件的示例代码
2019/03/09 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
python中的for循环
2018/09/28 Python
python pandas库的安装和创建
2019/01/10 Python
对Python协程之异步同步的区别详解
2019/02/19 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
python中的 zip函数详解及用法举例
2020/02/16 Python
python实现IOU计算案例
2020/04/12 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
Pyinstaller打包Scrapy项目的实现步骤
2020/09/22 Python
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
半年思想汇报
2013/12/30 职场文书
人力资源主管的岗位职责
2014/03/15 职场文书
班主任经验交流会主持词
2014/04/01 职场文书
个人合作协议书范本
2014/04/18 职场文书
2016新年慰问信范文
2015/03/25 职场文书
java如何实现socket连接方法封装
2021/09/25 Java/Android
Android Flutter实现图片滑动切换效果
2022/04/07 Java/Android
MyBatis核心源码深度剖析SQL语句执行过程
2022/05/20 Java/Android