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 相关文章推荐
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
jQuery实现回到顶部效果
Oct 19 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实现将GB编码转换为UTF8
2006/11/25 PHP
PHP下通过file_get_contents的代理使用方法
2011/02/16 PHP
php将fileterms函数返回的结果变成可读的形式
2011/04/21 PHP
C# WinForm中实现快捷键自定义设置实例
2015/01/23 PHP
php中return的用法实例分析
2015/02/28 PHP
PHP中读取文件的几个方法总结(推荐)
2016/06/03 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
2007/04/20 Javascript
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
2007/11/30 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012/08/14 Javascript
浅析JavaScript中两种类型的全局对象/函数
2013/12/05 Javascript
jQuery中triggerHandler()方法用法实例
2015/01/19 Javascript
JavaScript获取页面中表单(form)数量的方法
2015/04/03 Javascript
如何用js判断dom是否有存在某class的值
2017/02/13 Javascript
详解vue2父组件传递props异步数据到子组件的问题
2017/06/29 Javascript
php 解压zip压缩包内容到指定目录的实例
2018/01/23 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
详解Vue底部导航栏组件
2019/05/02 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
2020/01/18 Javascript
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
python正则表达式面试题解答
2020/04/28 Python
win7+Python3.5下scrapy的安装方法
2018/07/31 Python
Python 字符串换行的多种方式
2018/09/06 Python
微信公众号token验证失败解决方案
2019/07/22 Python
Win系统PyQt5安装和使用教程
2019/12/25 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
webView加载html图片遇到的问题解决
2019/10/08 HTML / CSS
L’Artisan Parfumeur官网:法国香水品牌
2020/08/11 全球购物
生物技术研究生自荐信
2013/11/12 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
2015年度绩效考核工作总结
2015/05/27 职场文书
采购部2015年度工作总结
2015/07/24 职场文书
Python Django搭建文件下载服务器的实现
2021/05/10 Python
Python实现的扫码工具居然这么好用!
2021/06/07 Python