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中fade(),show()起始位置的一点小发现
Apr 25 jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
Jquery让form表单异步提交代码实现
Nov 14 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
jquery实现手风琴案例
May 04 jQuery
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
jQuery实现计算器功能
Oct 19 jQuery
jQuery+ajax实现文件上传功能
Dec 22 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 模拟POST|GET操作实现代码
2010/07/20 PHP
PHP错误抑制符(@)导致引用传参失败Bug的分析
2011/05/02 PHP
PHP面向对象——访问修饰符介绍
2012/11/08 PHP
解析smarty模板中类似for的功能实现
2013/06/18 PHP
解析PHP中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
PHP内存缓存Memcached类实例
2014/12/08 PHP
教你php如何实现验证码
2016/01/20 PHP
IE6/7/8中Option元素未设value时Select将获取空字符串
2011/04/07 Javascript
javascript打印输出json实例
2013/11/11 Javascript
js弹出确认是否删除对话框
2014/03/27 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
AngularJS 最常用的八种功能(基础知识)
2017/06/26 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
Vue实现自定义下拉菜单功能
2018/07/16 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
[04:21]狐狸妈带你到现场 DOTA2 TI中国区预选赛线下赛路线指引
2014/05/22 DOTA
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
Python实现简单的文本相似度分析操作详解
2018/06/16 Python
5款Python程序员高频使用开发工具推荐
2019/04/10 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
python实现差分隐私Laplace机制详解
2019/11/25 Python
python多线程使用方法实例详解
2019/12/30 Python
Python关于拓扑排序知识点讲解
2021/01/04 Python
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
法国大使拉杆箱官网:DELSEY Paris
2018/03/20 全球购物
OSPF有什么优点?为什么OSPF比RIP收敛快?
2013/02/13 面试题
编辑找工作求职信范文
2013/12/16 职场文书
全国道德模范事迹
2014/02/01 职场文书
毕业生自荐书
2014/02/02 职场文书
植树造林的宣传标语
2014/06/23 职场文书
酒店端午节活动方案
2014/08/26 职场文书
2014年银行员工年终自我评价
2014/09/19 职场文书
酒店前台岗位职责
2015/04/16 职场文书
忠诚教育学习心得体会
2016/01/23 职场文书
剑指Offer之Java算法习题精讲二叉树的构造和遍历
2022/03/21 Java/Android