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获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
jquery 一键复制到剪切板的实例
Sep 20 jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 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
30个php操作redis常用方法代码例子
2014/07/05 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
2015/04/26 PHP
Yii2 ActiveRecord多表关联及多表关联搜索的实现
2016/06/30 PHP
在PHP中输出JS语句以及乱码问题的解决方案
2019/02/13 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
select多选 multiple的使用示例
2014/06/16 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
2015/03/25 Javascript
jQuery给指定的table动态添加删除行的操作方法
2016/10/12 Javascript
浅谈jquery选择器 :first与:first-child的区别
2016/11/20 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
2018/08/13 jQuery
Vue 设置axios请求格式为form-data的操作步骤
2019/10/29 Javascript
JavaScript直接调用函数与call调用的区别实例分析
2020/05/22 Javascript
利用soaplib搭建webservice详细步骤和实例代码
2013/11/20 Python
浅谈python中截取字符函数strip,lstrip,rstrip
2015/07/17 Python
python中安装模块包版本冲突问题的解决
2017/05/02 Python
python3 shelve模块的详解
2017/07/08 Python
[原创]教女朋友学Python(一)运行环境搭建
2017/11/29 Python
Linux-ubuntu16.04 Python3.5配置OpenCV3.2的方法
2018/04/02 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
为什么说python更适合树莓派编程
2020/07/20 Python
Python 如何创建一个线程池
2020/07/28 Python
Python脚本实现Zabbix多行日志监控过程解析
2020/08/26 Python
英国最大的电子产品和家电零售企业:Currys PC World
2016/09/24 全球购物
全球领先的美容用品专卖店:Beauty Plus Salon
2018/09/04 全球购物
英国景点门票网站:attractiontix
2019/08/27 全球购物
介绍一下Java中标识符的命名规则
2014/02/03 面试题
物资采购方案
2014/06/12 职场文书
校运会口号
2014/06/18 职场文书
商业企业管理专业求职信
2014/07/10 职场文书
小学教研工作总结2015
2015/05/13 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书
会计实训总结范文
2015/08/03 职场文书
商务信函英语问候语
2015/11/10 职场文书