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日程管理控件glDatePicker用法详解
Mar 29 jQuery
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
jQuery实现影院选座订座效果
Apr 13 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+mysql写的留言本
2006/10/09 PHP
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
php中防止伪造跨站请求的小招式
2011/09/02 PHP
php遍历删除整个目录及文件的方法
2015/03/13 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
PHP获取指定日期是星期几的实现方法
2016/11/30 PHP
PHP页面静态化――纯静态与伪静态用法详解
2020/06/05 PHP
学习jquery之一
2007/04/27 Javascript
javascript 原型继承介绍
2011/08/30 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
2013/07/21 Javascript
解决jquery插件冲突的问题
2014/01/23 Javascript
jquery delay()介绍及使用指南
2014/09/02 Javascript
Javascript中innerHTML用法实例分析
2015/01/12 Javascript
js带点自动图片轮播幻灯片特效代码分享
2015/09/07 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
jQuery滚动监听实现商城楼梯式导航效果
2017/03/06 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
2017/03/15 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
2017/06/15 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
2018/02/24 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
2020/04/09 Javascript
在Python中使用CasperJS获取JS渲染生成的HTML内容的教程
2015/04/09 Python
使用matplotlib画散点图的方法
2018/05/25 Python
Python3单行定义多个变量或赋值方法
2018/07/12 Python
python程序封装为win32服务的方法
2021/03/07 Python
python matplotlib中的subplot函数使用详解
2020/01/19 Python
python3 logging日志封装实例
2020/04/08 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
Python pandas如何向excel添加数据
2020/05/22 Python
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
儿科护士实习自我鉴定
2013/10/17 职场文书
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
政法干警核心价值观心得体会
2014/09/11 职场文书
Python办公自动化PPT批量转换操作
2021/09/15 Python