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 submit()不能提交表单的解决方法
Apr 24 jQuery
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
js和jquery中获取非行间样式
May 05 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
jQuery实现的中英文切换功能示例
Jan 11 jQuery
jQuery分组选择器简单用法示例
Apr 04 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
jQuery实现鼠标滑动切换图片
May 27 jQuery
jquery插件懒加载的示例
Oct 24 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 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
php中mkdir函数用法实例分析
2014/11/15 PHP
php探针使用原理和技巧讲解
2019/09/17 PHP
Javascript引用指针使用介绍
2012/11/07 Javascript
jquery中$(#form :input)与$(#form input)的区别
2014/08/18 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
js图片翻书效果代码分享
2015/08/20 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
javascript数组遍历的方法实例分析
2016/09/13 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
2019/02/28 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
VUE实现自身整体组件销毁的示例代码
2020/01/13 Javascript
浅谈Vue static 静态资源路径 和 style问题
2020/11/07 Javascript
学习python (2)
2006/10/31 Python
Python的Django框架使用入门指引
2015/04/15 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
python Tkinter的图片刷新实例
2019/06/14 Python
解决Mac下使用python的坑
2019/08/13 Python
django项目用higcharts统计最近七天文章点击量
2019/08/17 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
浅谈django框架集成swagger以及自定义参数问题
2020/07/07 Python
Python实现删除某列中含有空值的行的示例代码
2020/07/20 Python
日本著名化妆品零售网站:Cosme Land
2019/03/01 全球购物
金额转换,阿拉伯数字的金额转换成中国传统的形式如:(¥1011)-> (一千零一拾一元整)输出
2015/05/29 面试题
财务会计专业应届毕业生求职信
2013/10/18 职场文书
学习新党章思想汇报
2014/01/09 职场文书
食品厂厂长岗位职责
2014/01/30 职场文书
巡警年度自我鉴定
2014/02/21 职场文书
建筑工地大门标语
2014/06/18 职场文书
中标通知书
2015/04/17 职场文书
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android
redis lua限流算法实现示例
2022/07/15 Redis