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实现鼠标经过显示动画边框特效
Mar 24 jQuery
jQuery+pjax简单示例汇总
Apr 21 jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
jQuery中DOM常见操作实例小结
Aug 01 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
APMServ使用说明
2006/10/23 PHP
PHP中把有符号整型转换为无符号整型方法
2015/05/27 PHP
php图片水印添加、压缩、剪切的封装类实现
2020/04/18 PHP
开启PHP的伪静态模式
2015/12/31 PHP
PHP实现补齐关闭的HTML标签
2016/03/22 PHP
阿里对象存储OSS在laravel框架中的使用方法
2019/10/13 PHP
基于JQuery的cookie插件
2010/04/07 Javascript
最短的javascript:地址栏载入脚本代码
2011/10/13 Javascript
获取select元素被选中的文本内容的js代码
2014/01/29 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
2014/08/16 Javascript
JS组件Bootstrap实现图片轮播效果
2016/05/16 Javascript
nodejs调取微信收货地址的方法
2017/12/20 NodeJs
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
简单了解Javscript中兄弟ifream的方法调用
2019/06/17 Javascript
微信小程序纯文本实现@功能
2020/04/08 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
python实现数据写入excel表格
2018/03/25 Python
matplotlib给子图添加图例的方法
2018/08/03 Python
python 列表中[ ]中冒号‘:’的作用
2019/04/30 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
pymysql模块的操作实例
2019/12/17 Python
Django模型中字段属性choice使用说明
2020/03/30 Python
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
详解Django中views数据查询使用locals()函数进行优化
2020/08/24 Python
洛杉矶生活休闲而精致的基础品牌:Mika Jaymes
2018/01/07 全球购物
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
电子商务专业学生的学习自我评价
2013/10/27 职场文书
毕业生求职找工作的自我评价范文
2013/11/27 职场文书
家庭教育先进个人事迹材料
2014/01/24 职场文书
庆元旦文艺演出主持词
2014/03/27 职场文书
英语教师个人工作总结
2015/02/09 职场文书
幼儿园教师师德师风承诺书
2015/04/28 职场文书
该怎么书写道歉信?
2019/07/03 职场文书
动画《新网球王子 U-17 WORLD CUP》希腊队PV公开
2022/04/02 日漫