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.form.js的使用详解
Jun 14 jQuery
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
jquery图片预览插件实现方法详解
Jul 18 jQuery
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
jQuery 实现扁平式小清新导航
Jul 07 jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 23 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
tp5框架使用composer实现日志记录功能示例
2019/01/10 PHP
laravel5表单唯一验证的实例代码
2019/09/30 PHP
ThinkPhP+Apache+PHPstorm整合框架流程图解
2020/11/23 PHP
让iframe框架网页在任何浏览器下自动伸缩
2006/08/18 Javascript
Ext.MessageBox工具类简介
2009/12/10 Javascript
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
Jquery中删除元素的实现代码
2011/12/29 Javascript
angular.JS实现网页禁用调试、复制和剪切
2017/03/31 Javascript
JavaScript实现反转字符串的方法详解
2017/04/27 Javascript
AngularJS实现进度条功能示例
2017/07/05 Javascript
详解Vue2中组件间通信的解决全方案
2017/07/28 Javascript
值得收藏的八个常用的js正则表达式
2018/10/19 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
[02:44]重置世界,颠覆未来——DOTA2 7.23版本震撼上线
2019/12/01 DOTA
python 回调函数和回调方法的实现分析
2016/03/23 Python
Python实现的文本编辑器功能示例
2017/06/30 Python
Python实现图片转字符画的示例代码
2017/08/21 Python
Python爬取附近餐馆信息代码示例
2017/12/09 Python
浅谈python正则的常用方法 覆盖范围70%以上
2018/03/14 Python
Python爬取数据并写入MySQL数据库的实例
2018/06/21 Python
Python时间差中seconds和total_seconds的区别详解
2019/12/26 Python
python实现提取COCO,VOC数据集中特定的类
2020/03/10 Python
selenium+python配置chrome浏览器的选项的实现
2020/03/18 Python
python 实现两个线程交替执行
2020/05/02 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
把Anaconda中的环境导入到Pycharm里面的方法步骤
2020/10/30 Python
基于HTML5 Canvas 实现弹出框效果
2017/06/05 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
2018/08/29 HTML / CSS
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
毕业自我鉴定怎么写
2014/03/25 职场文书
公司人事专员岗位职责
2014/08/11 职场文书
经验交流材料格式
2014/12/30 职场文书
中英文求职信范文
2015/03/19 职场文书
2019暑假学生安全口号
2019/06/27 职场文书
六年级作文之家庭作文
2019/12/12 职场文书
vue组件的路由高亮问题解决方法
2021/05/11 Vue.js