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操作之效果详解
May 19 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
jQuery zTree插件使用简单教程
Aug 16 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
jquery实现穿梭框功能
Jan 19 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执行速度全攻略(上)
2006/10/09 PHP
关于BIG5-HKSCS的解决方法
2007/03/20 PHP
php中动态调用函数的方法
2015/03/16 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
PHP对象、模式与实践之高级特性分析
2016/12/08 PHP
PHP中常见的密码处理方式和建议总结
2018/10/14 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
Jquery知识点一 Jquery的ready和Dom的onload的区别
2011/01/15 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
JS求平均值的小例子
2013/11/29 Javascript
Bootstrap入门书籍之(一)排版
2016/02/17 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
jQuery实现自动调用和触发某个事件的方法
2016/11/18 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
2017/02/23 Javascript
Google 爬虫如何抓取 JavaScript 的内容
2017/04/07 Javascript
js实现鼠标拖拽多选功能示例
2017/08/01 Javascript
利用Vue2.x开发实现JSON树的方法
2018/01/04 Javascript
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
JavaScript实现表单验证功能
2020/12/09 Javascript
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
利用python批量修改word文件名的方法示例
2017/10/17 Python
使用python存储网页上的图片实例
2018/05/22 Python
PythonWeb项目Django部署在Ubuntu18.04腾讯云主机上
2019/04/01 Python
Pytorch转keras的有效方法,以FlowNet为例讲解
2020/05/26 Python
理肤泉加拿大官网:La Roche-Posay加拿大
2018/07/06 全球购物
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
高二物理教学反思
2014/02/08 职场文书
公司担保书范文
2014/05/21 职场文书
大学新闻系自荐书
2014/05/31 职场文书
人工作失职检讨书
2015/05/05 职场文书
创业计划书之美甲店
2019/09/20 职场文书
python图片灰度化处理的几种方法
2021/06/23 Python
Python echarts实现数据可视化实例详解
2022/03/03 Python