onkeypress、onkeydown、onkeyup
在使用JavaScript做WEB键盘事件侦听捕获时,主要采用onkeypress、onkeydown、onkeyup三个事件进行出来。该三个事件的执行顺序如下:onkeydown -> onkeypress ->onkeyup。在一般情况下,采用三种键盘事件均可对键盘输入进行有效的响应。当在实际使用中,会发现这几者有些不同的差别。
onkeypress事件不能对系统功能键(例如:后退、删除等,其中对中文输入法不能有效响应)进行正常的响应,onkeydown和onkeyup均可以对系统功能键进行有效的拦截,但事件截获的位置不同,可以根据具体的情况选择不同的键盘事件。
由于onkeypress不能对系统功能键进行捕获,导致window.event对象的keyCode属性和onkeydown,onkeyup键盘事件中获取的keyCode属性不同,主要表现在onkeypress事件的keyCode对字母的大小写敏感,而onkeydown、onkeyup事件不敏感;onkeypress事件的keyCode无法区分主键盘上的数字键和付键盘数字键的,而onkeydown、onkeyup的keyCode对主付键盘的数字键敏感。
:在Maxthon浏览器中,onkeydown和onkeyup有连续响应两次键盘事件的BUG,onkeydown不能正常地对F1~F12的功能键进行正常的截获(onkeyup没有发现该问题),具体原因不明。不知道以后是否会进行订正。
键盘事件包括keydown、kepress和keyup三种,每次敲击键盘都会(依次?)触发这三种事件,其中keydown和keyup是比较低级的接近于硬件的事件,通俗的理解是这两个事件可以捕获到你敲击了键盘中某个键;而keypress是相对于字符层面的较为高级点的事件,这个事件能够捕捉到你键入了哪个字符。可以这样理解,如果你敲击了A键,keydown和keyup事件只是知道你敲击了A键,它并不知道你敲的是大写的A(你同时按下了Shift键)还是敲的是小写a,它是以"键"为单位,你敲入了大写的A,它只是当成你敲下了shift和A两个键而已,但是keypress可以捕捉到你是敲入的大写的A还是小写的a.
在介绍Prototype中Event对象前先介绍一下浏览器中的事件模型,浏览器中的事件主要有HTML事件、鼠标事件和键盘事件,前两种事件比较好理解,这里主要解释一下键盘事件以及它在IE和firefox中的区别.
还要理解一个概念是键盘中的键分为字符(可打印)键和功能键(不可打印),功能键包括Backspace, Enter, Escape, the arrow keys, Page Up, Page Down, and F1 through F12 等
下面说一下键盘事件的具体使用方法,
键盘事件的event对象中包含一个keyCode属性,IE中只有这一个属性,当为keydown和keyup 事件是,keycode属性表示你具体按下的键(也称为virtual keycode),当捕捉的是keypress事件时keyCode属性指的是你键入的字符(character code)
在firefox中情况有些不同,event对象包含一个keyCode属性和一个charCode属性,keydown和keyup事件的时候,keyCode表示的就是你具体按的键,charCode为0;当捕捉的是keypress事件时,keyCode为0,charCode指的是你按下的字符
【JavaScript】onKeyDown与onKeyPress事件的异同
从单词意思上理解,onKeyDown和onKeyPress几乎找不到差别。实际上它们的差别也的确不容易识别出来。onKeyDown事件,是在按下某个键时就会触发,如果按着不放,则会一直触发;onKeyPress事件,也是在按下键时触发,但不同的是,这个键必须是字符键,比如说1,2,3,a,b,c,`,在有字符输入的情况下它才会触发,当你按下非字符键如Shift,F4之类的,它是不会触发的。
写一个灰常简单的例子,大家就明白了:
HTML代码:
123 onKeyPress和onKeyDown:<br/>onKeyPress只会在按个某个键并有字符输入的情况下触发,而onKeyDown会在按下任一键时触发<br/><input type="text" id="text1"/><br/> 1234567 var text1 = document.getElementById("text1");text1.οnkeypress=function(){ alert('keypress');}text1.οnkeydοwn=function(){ alert('keydown');}
当你按下字符键时,你会发现两个事件都触发了,但有先后顺序,先触发KeyDown,再触发KeyPress。但当你按下非字符键时,就只会触发KeyDown事件,KeyPress则不知所踪。当焦点在文本框时,哪怕你按下的是F5键刷新,onKeyDown也都会触发。
当捕捉的是keypress事件时,当你按的是可打印字符时,keyCode为0,charCode指的是你按下的字符的键值,当你按的是不可打印字符时,keyCode为按下的键的键值,charCode为0
注意:功能键不会触发keypress事件,因为keypress对应的就是可打印的字符,但是有一点IE和FF 中的区别,你按下一个字符键的同时按下alt键,在IE中不触发keypress事件,但是在ff中可触发,我发现在IE中按下ctrl键的时候只有按下q键会触发事件其他的要么不会触发事件,要么被浏览器IE自身捕获了,例如你按下ctrl_A,全选某个东西,你按ctrl_S保存文件,但是在FF中就好多了,事件都是先传递到网页,再向外传递
鉴于IE和FF中的区别,如果你比较懒的话,建议只使用keydow和keyup事件,这两种事件的使用在IE和FF中基本上没有区别,也不要捕获ctrl_A等被浏览器定义为快捷键的事件
键盘事件event对象还有三个其他的属性altKey, ctrlKey, and shiftKey 来判断你按下一个键的时候是否按下了alt等键,这三个属性使用比较简单,三种事件都可以使用,也不存在ie和ff的兼容性问题
onKeyPress 字母大小写的keyCode不同(如T84,t116同F5)
onKeyDown 字母大小写的keyCode相同
ASCII码 |
|
onkeypress、onkeydown、onkeyup相关推荐
- js学习-DOM之动态创建元素的三种方式、插入元素、onkeydown与onkeyup两个事件整理...
动态创建元素的三种方式: 第一种: Document.write(); <body> <input type="button" id="btn" ...
- JS 事件(onkeyup、onkeydown、onkeypress、onchange),对文本的事件处理之小总结
1.事件的简单介绍 按键相关的: onkeydown 当用户按下键盘按键时触发. onkeyup 当用户释放键盘按键时触发. onkeypress 当键盘按键被按下并释放一个键时发生. 其他: o ...
- JavaScript学习笔记(三)---事件、正则表达式、ES6、运动
JavaScript学习笔记(三)---事件.正则表达式.ES6.运动 27.insertbefore 28.滚动条及事件 29.事件及事件对象 30.鼠标事件对象的属性 31.案例:图片随鼠标移动 ...
- 浅析OnKeyPress事件和OnKeyDown、OnKeyUp事件
OnKeyPress事件 OnKeyPress事件是在用户按下键盘上任何一个可打印的字符时发生,只有能接收键盘输入的组件才有OnKeyPress事件.我们常常利用OnKeyPress事件截取在编辑框和 ...
- onkeyup、onkeydown和onkeypress的区别
onkeyup.onkeydown和onkeypress的区别 在火狐浏览器测试得出结论: onkeyup是在键盘按下去并松开后执行 onkeydown在键盘下去就会执行,不管是数字键还是字母键还是任 ...
- onkeydown、onkeypress和onkeyup的区别介绍
文章目录 触发时机 总结: 不同 触发时机 onkeydown 这个事件在用户按下任何键盘键(包括系统按钮,如箭头键和功能键)时发生. onkeypress 这个事件在用户按下并放开任何字母数字键时发 ...
- Android onKeyDown、onKeyUp、dispatchKeyEvent的区别
1. onKeyDown.onKeyUp.dispatchKeyEvent的区别和使用场景 区别: 1.1 onKeyDown.onKeyUp是按键事件的回调接口(冒泡式调用),dispatchKey ...
- JS中的键盘事件(onkeydown、onkeyup、keyCode)
键盘事件: okeydown:键盘被按下,如果一直按着键盘的按键,则okeydown事件会一直被触发. - 当键盘按键一直被按住的时候,事件被连续触发,第一次和第二次以及后面的n次之间,触发的时间间隔 ...
- php中input的onclick,onkeydown、onkeyup、onclick、onchange、oninput、onpropertychange 的用法和区别...
onkeydown.onkeyup.onclick onkeydown 是按键按下时触发: onkeyup 是按键弹起时触发: onclick 是按键按下并弹起时触发. 有一种情况,就是按住按键不放, ...
最新文章
- 成都计算机大专学校公办,成都设有计算机应用技术的公办大专学校
- Java学习记录-3.类的复用
- Java分析股票涨跌走势
- PostgreSQL adminpack扩展的作用
- 怎样用php写入数据库表,PHP如何将数据写入到MYSQL数据库
- 顺序容器(vector、list、string、deque、forward_list)及迭代器、容器适配器
- python爬虫中文乱码_Python爬虫处理抓取数据中文乱码问题
- iKcamp团队制作|基于Koa2搭建Node.js实战(含视频)☞ 中间件用法
- 用动态规划解小朋友分糖问题
- Pyhont 高阶函数
- A* 寻路算法[转载]
- Fullscreen API
- OCR怎么能离开扫描仪呢?
- 硬盘老是显示正在计算机,电脑开机总是提示正在扫描和修复驱动器解决措施
- 厦门大学和福州大学计算机专业哪个好,福建最好的5所大学,除了厦门大学,你还知道哪所大学?...
- 数字图像处理(Digital Image Processing)
- Word版本的毕业论文转成pdf后如何把目录作为书签保存下来
- 雷电模拟器安装magisk和Xposed
- js 模拟LED数字电子显示(分段式)
- 2018 ICML | Junction Tree Variational Autoencoder for Molecular Graph Generation
热门文章
- css3 选择器 odd,常用css3选择器
- CSS 选择器 CSS3选择器
- ET、LT、EPOLLONESHOT
- python 线程池 concurrent.futures ThreadPoolExecutor
- 12个球和一个天平,现知道只有一个和其它的重量不同,问怎样称才能用三次就找到那个球,13个呢
- matlab四元一次非线性方程求解,[转载]MATLAB求解非线性方程(转)
- 作为一个准研究生,怎样才能在研究生阶段不虚度?
- 什么是MVC?怎么在 php 中搭建 MVC?
- 威尔逊定理与逆定理及证明
- UE4 安卓手机launch报错