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插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
jquery拖动改变div大小
Jul 04 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
js/jQuery实现全选效果
Jun 17 jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
jQuery 添加元素和删除元素的方法
Jul 15 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
DC这些乐高系列动画电影你看过几部?
2020/04/09 欧美动漫
如何冲泡挂耳包咖啡?技巧是什么
2021/03/04 冲泡冲煮
discuz 首页四格:最新话题+最新回复+热门话题+精华文章插件
2007/08/19 PHP
PHP 身份证号验证函数
2009/05/07 PHP
浅谈discuz密码加密的方式
2014/05/22 PHP
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
js判断背景图片是否加载成功使用img的width实现
2013/05/29 Javascript
用Js实现的动态增加表格示例自己写的
2013/10/21 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
浅谈JavaScript异步编程
2017/01/20 Javascript
Javascript操作dom对象之select全面解析
2017/04/24 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
2019/05/16 Javascript
vue实现行列转换的一种方法
2019/08/06 Javascript
uni-app使用微信小程序云函数的步骤示例
2020/05/22 Javascript
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
Python 不同对象比较大小示例探讨
2014/08/21 Python
python matplotlib画图实例代码分享
2017/12/27 Python
基于python实现百度翻译功能
2019/05/09 Python
python求绝对值的三种方法小结
2019/12/04 Python
联想哥伦比亚网上商城:Lenovo Colombia
2017/01/10 全球购物
英国的领先快速时尚零售商:In The Style
2019/03/25 全球购物
介绍一下linux的文件系统
2012/03/20 面试题
计算机开发个人求职信范文
2013/09/26 职场文书
创伤外科专业推荐信范文
2013/11/19 职场文书
请假条标准格式规范
2014/04/10 职场文书
施工工地安全标语
2014/06/07 职场文书
安全生产知识竞赛活动总结
2014/07/07 职场文书
迟到检讨书
2015/01/26 职场文书
Mysql MVCC机制原理详解
2021/04/20 MySQL
MySQL令人大跌眼镜的隐式转换
2021/08/23 MySQL
Python实现视频自动打码的示例代码
2022/04/08 Python