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表单设置值的方法
Jun 30 jQuery
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
jQuery中DOM常见操作实例小结
Aug 01 jQuery
jQuery zTree树插件的使用教程
Aug 16 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
jquery插件实现代码雨特效
Apr 24 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 存取 MySQL 数据库的一个例子
2006/10/09 PHP
destoon官方标签大全
2014/06/20 PHP
php中mail函数发送邮件失败的解决方法
2014/12/24 PHP
php从数组中随机选择若干不重复元素的方法
2015/03/14 PHP
php正则preg_replace_callback函数用法实例
2015/06/01 PHP
WordPress中编写自定义存储字段的相关PHP函数解析
2015/12/25 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
js函数调用常用方法详解
2012/12/03 Javascript
JS教程:window.location使用方法的区别介绍
2013/10/04 Javascript
js判断字符是否是汉字的两种方法小结
2014/01/03 Javascript
JS实现将人民币金额转换为大写的示例代码
2014/02/13 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
2015/12/06 Javascript
学习JavaScript鼠标响应事件
2015/12/25 Javascript
改变checkbox默认选中状态及取值的实现代码
2016/05/26 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
2017/09/26 Javascript
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
浅谈vuex actions和mutation的异曲同工
2018/12/13 Javascript
ES6模板字符串和标签模板的应用实例分析
2019/06/25 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
封装Vue Element的table表格组件的示例详解
2020/08/19 Javascript
使用js获取身份证年龄的示例代码
2020/12/11 Javascript
[02:49]2018DOTA2亚洲邀请赛主赛事决赛日战况回顾 Mineski鏖战5局夺得辉耀
2018/04/10 DOTA
详解Python的Flask框架中生成SECRET_KEY密钥的方法
2016/06/07 Python
Anaconda2下实现Python2.7和Python3.5的共存方法
2018/06/11 Python
解决python升级引起的pip执行错误的问题
2018/06/12 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
Django 解决阿里云部署同步数据库报错的问题
2020/05/14 Python
Keras搭建自编码器操作
2020/07/03 Python
scrapy与selenium结合爬取数据(爬取动态网站)的示例代码
2020/09/28 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
活动总结格式范文
2014/04/26 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书
导游词之台湾阿里山
2019/10/23 职场文书
redis的list数据类型相关命令介绍及使用
2022/01/18 Redis