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绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
基于jquery实现左右上下移动效果
May 02 jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
jQuery zTree插件快速实现目录树
Aug 16 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 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设计模式 Command(命令模式)
2011/06/26 PHP
thinkphp下MySQL数据库读写分离代码剖析
2017/04/18 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
JS 显示当前日期与时间的代码
2010/03/24 Javascript
改善用户体验的五款jQuery插件分享
2011/05/22 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
2012/05/23 Javascript
JS定时器实例
2013/04/17 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
JavaScript中消除闭包的一般方法介绍
2015/03/16 Javascript
浅谈JavaScript中null和undefined
2015/07/09 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
原生js编写焦点图效果
2016/12/08 Javascript
js仿微信语音播放实现思路
2016/12/12 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
JS判断时间段的实现代码
2017/06/14 Javascript
Three.js基础学习教程
2017/11/16 Javascript
微信小程序实现YDUI的ScrollTab组件
2018/02/02 Javascript
vue升级之路之vue-router的使用教程
2018/08/14 Javascript
vue中设置、获取、删除cookie的方法
2018/09/21 Javascript
js form表单input框限制20个字符,10个汉字代码实例
2019/04/12 Javascript
sortable+element 实现表格行拖拽的方法示例
2019/06/07 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
Python threading多线程编程实例
2014/09/18 Python
Python统计一个字符串中每个字符出现了多少次的方法【字符串转换为列表再统计】
2019/05/05 Python
python3实现mysql导出excel的方法
2019/07/31 Python
python for循环remove同一个list过程解析
2019/08/14 Python
Python 列表的清空方式
2020/01/13 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
使用python的turtle函数绘制一个滑稽表情
2020/02/28 Python
使用CSS3实现SVG路径描边动画效果入门教程
2019/10/21 HTML / CSS
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
迪卡侬比利时官网:Decathlon比利时
2019/12/28 全球购物
综合办公室个人的自我评价
2013/12/22 职场文书
浅析MongoDB之安全认证
2021/06/26 MongoDB
总结Python变量的相关知识
2021/06/28 Python