类型

  键盘事件用来描述键盘行为,主要有keydown、keypress、keyup三个事件

keydown

  当用户按下键盘上的任意键时触发,如果按住不放的话,会重复触发该事件

<div id="test" style="height: 30px;width: 200px;">请按下键盘上的任意键</div>
<button id="reset">还原</button>
<script>
reset.onclick = function(){history.go();}
document.onkeydown = function(e){
if(!test.mark){
test.innerHTML ='';
}
test.mark = 1;
e = e || event;
test.innerHTML += e.type;
}
</script>

keypress

  当用户按下键盘上的字符键时触发,按下功能键时不触发。如果按住不放的话,会重复触发该事件

  [注意]关于esc键,各浏览器处理不一致。IE浏览器和firefox浏览器按下esc键时,会触发keypress事件;而chrome/safari/opera这三个webkit内核的浏览器则不会触发

  键盘事件必须绑定在可以获得焦点的元素上。而页面刚加载完成时,焦点处于document元素

  [注意]IE浏览器不完全支持绑定在document元素上的keypress事件,只有IE9+浏览器在使用DOM2级事件处理程序时才支持

  所以,以下代码中,只有焦点处于id为'test'的元素上,才会发生keypress事件

<button id="test" style="height: 30px;width: 200px;">请按下键盘上的任意键</button><br>
<button id="reset">还原</button>
<script>
reset.onclick = function(){history.go();}
test.focus();
test.onkeypress = function(e){
if(!test.mark){
test.innerHTML ='';
}
test.mark = 1;
e = e || event;
test.innerHTML += e.type;
}
</script>

keyup

  当用户释放键盘上的键时触发

<div id="test" style="height: 30px;width: 200px;">请按下键盘上的任意键</div>
<button id="reset">还原</button>
<script>
reset.onclick = function(){history.go();}
document.onkeyup = function(e){
if(!test.mark){
test.innerHTML ='';
}
test.mark = 1;
e = e || event;
test.innerHTML += e.type;
}
</script>

时间间隔

  系统为了防止按键误被连续按下,所以在第一次触发keydown事件后,有500ms的延迟,才会触发第二次keydown事件

  [注意]类似的,keypress事件也存在500ms的时间间隔

<button id="btn">获取间隔时间</button>
<span>说明:按钮获取焦点后,使用空格键按下一段时间,松开后可获取keydown事件的时间间隔</span>
<div id="result"></div>
<script>
var time = [];
var last=0;
btn.onkeydown = function(e){
e = e || event;
time.push(e.timeStamp-last);
last = e.timeStamp;
}
btn.onclick = function(){
time.shift();
result.innerHTML = time.join();
}
</script>

顺序

  如果用户一直按键不松开,就会连续触发键盘事件,触发的顺序如下

1、keydown
2、keypress
3、keydown
4、keypress
5、(重复以上过程)
6、keyup
<button id="test" style="height: 30px;width: 200px;">请按下键盘上的任意键</button><br>
<button id="reset">还原</button>
<script>
reset.onclick = function(){history.go();}
test.focus();
test.onkeypress =test.onkeydown =test.onkeyup = function(e){
if(!test.mark){
test.innerHTML ='';
}
test.mark = 1;
e = e || event;
test.innerHTML += e.type + ';';
}
</script>

按键信息

  键盘事件包括keyCode、key、char、keyIdentifier和修改键共5个按键信息

键码keyCode

  在发生键盘事件时,event事件对象的键码keyCode属性中会包含一个代码,与键盘上一个特定的键对应。对数字字母字符键,keyCode属性的值与ASCII码中对应大写字母或数字的编码相同

  [注意]firfox浏览器不支持keypress事件中的keyCode属性

  而我们在做游戏时,常用的四个方向按键,左上右下(顺时针)的键码分别是37、38、39、40

<div id="test" style="height: 30px;width: 200px;"></div>
<button id="reset">还原</button>
<script>
reset.onclick = function(){history.go();}
document.onkeyup = function(e){
e = e || event;
test.innerHTML += e.keyCode + ';';
}
</script>
key

  key属性是为了取代keyCode而新增的,它的值是一个字符串。在按下某个字符键时,key的值就是相应的文本字符;在按下非字符键时,key的值是相应键的名,默认为空字符串

  [注意]IE8-浏览器不支持,而safari浏览器不支持keypress事件中的key属性

<div id="test" style="height: 30px;width: 200px;"></div>
<button id="reset">还原</button>
<script>
reset.onclick = function(){history.go();}
document.onkeyup = function(e){
e = e || event;
test.innerHTML = e.key;
}
</script>

char

  char属性在按下字符键时的行为与key相同,但在按下非字符键时值为null

  [注意]该属性只有IE9+浏览器支持

keyIdentifier

  keyIdentifier属性在按下非字符键的情况下与key的值相同。对于字符键,keyIdentifier返回一个格式类似“U+0000”的字符串,表示Unicode值

  [注意]该属性只有chrome/safari/opera浏览器支持

<div id="test" style="height: 30px;width: 200px;"></div>
<button id="reset">还原</button>
<script>
reset.onclick = function(){history.go();}
document.onkeyup = function(e){
e = e || event;
test.innerHTML = e.keyIdentifier;
}
</script>

兼容

  一般地,使用key属性和keyCode属性来实现兼容处理。key属性IE8-浏览器不支持,而keyCode属性无法区分大小写字母

var handler = function(e){
var CompatibleKey;
e = e || event;
//支持key属性
if(e.key != undefined){
CompatibleKey = e.key;
}else{
//当按键是数字或大写字母时
if(e.keyCode>47 && e.keyCode<58 || e.keyCode>64 && e.keyCode<91){
CompatibleKey =String.fromCharCode(e.keyCode);
}else{
//当案按键是方向按键时
switch(e.keyCode){
case 37:
CompatibleKey = 'ArrowLeft';
break;
case 38:
CompatibleKey = 'ArrowUp';
break;
case 39:
CompatibleKey = 'ArrowRight';
break;
case 40:
CompatibleKey = 'ArrowDown';
break;
}
}
}
}

修改键

  修改键在鼠标事件中介绍过,在键盘事件中也存在修改键

  修改键就是Shift、Ctrl、Alt和Meta(在Windows键盘中是Windows键,在苹果机中是Cmd键)。DOM为此规定了4个属性,表示这些修改键的状态:shiftKey、ctrlKey、altKey和metaKey。这些属性中包含的都是布尔值,如果相应的键被按下了,则值为true;否则值为false

<div id="box" style="height:30px;width:300px;background:pink;"></div>
<script>
document.onkeyup=function(e){
e = e || event;
if(e.shiftKey){box.innerHTML = 'shiftKey;'}
if(e.ctrlKey){box.innerHTML = 'ctrlKey;'}
if(e.altKey){box.innerHTML = 'altKey;'}
if(e.metaKey){box.innerHTML = 'metaKey;'}
}
document.onkeydown = function(){
return false;
}
</script>

应用

【1】提示大写

  在输入框中输入字符时,如果大写模式开启,提示此时为大写模式。提示大写并不是说当前输出的是大写字母,而是说当前caps lock大写按键被按下

  [注意]大写有两种实现方式:一种是在capslock开启的情况下,另一种是输入字符时,同时按下shift键

<input id="test">
<span id="tips"></span>
<script>
test.onkeydown = function(e){
e = e || event;
//兼容IE8-浏览器,因为IE8-浏览器不支持在定时器中传递事件对象e
var shiftKey = e.shiftKey;
var keyCode = e.keyCode;
//通过定时器延迟来获取当前输入字符值
setTimeout(function(){
var value = test.value.slice(-1);
//如果没有按下shift键,并且当前为大写字母,或者按下shift键,且当前为小写字母
if(!shiftKey && /[A-Z]/.test(value) || shiftKey && /[a-z]/.test(value)){
tips.innerHTML = '当前为大写模式';
setTimeout(function(){
tips.innerHTML = '';
},400)
}
})
}
</script>

【2】过滤输入

  只能输入数字,输入其他字符没有效果

<input id="test">
<span id="tips">只能输入数字</span>
<script>
test.onkeydown = function(e){
e = e || event;
//利用定时器,获取实时输入值
setTimeout(function(){
//当输入值中包含非数字时
if(/[^0-9]/.test(test.value)){
//只输出数字值
test.value = String(/\d*/.exec(test.value));
}
})
}
</script>

keydown和keyress区别

虽然从字面理解, KeyDown是按下一个键的意思, 但实际上二者的根本区别是, 系统由KeyDown返回键盘的代码, 
然后由TranslateMessage函数翻译成成字符, 由KeyPress返回字符值. 因此在KeyDown中返回的是键盘的代码,
而KeyPress返回的是ASCII字符. 所以根据你的目的, 如果只想读取字符, 用KeyPress, 如果想读各键的状态, 用KeyDown.  

[转]js的键盘事件的更多相关文章

  1. js浏览器键盘事件控制(转自新浪微博)

    js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...

  2. JS获取键盘事件

    <script type="text/javascript" language=JavaScript charset="UTF-8"> docume ...

  3. [原创]Javascript 利用mousetrap.js进行键盘事件操作

    我们日常开发中,会遇到js的键盘操作,例如回车提交表单之类的.或者按下某个键执行某个方法.无意中发现一个大小不到4K的js文件,它非常方便的操作键盘事件. 自己也尝试了一下:具体代码如下: 详情可以去 ...

  4. js/jquery键盘事件及keycode大全

    js/jquery的键盘事件分为keypress.keydown和keyup事件 一.键盘事件 1.keydown()事件当按钮被按下时,发生 keydown 事件. 2.keypress()事件ke ...

  5. 初识 jquery.simulate.js 模拟键盘事件

    用jquery 和 jquery.simulate.js 实现模拟键盘事件,点击上下左右div相当于点击键盘的上下左右键 <!DOCTYPE html> <html> < ...

  6. JS模拟键盘事件 -- 原理及小例子

    提问: 键盘默认事件,比如tab切换,alt+f4关闭,ctrl+t新建等,如果不想通过键盘而是一些按钮点击来触发这些功能,该咋办呢? 例子: 先以tab为例上一个小例子: <!DOCTYPE ...

  7. 几个常用的JS鼠标键盘事件例子

    首先普及一下鼠标左右键值的相关方法: 1.event.x 鼠标横轴  2.event.y 鼠标纵轴  3.event.keycode 键盘值  4.events.button==0 默认.没有按任何按 ...

  8. 【原生JS】键盘事件

    视频播放器音量调节效果. 效果图:“我很丑!~可是我有音乐和啤酒!~” HTML: <!DOCTYPE html> <html> <head> <meta c ...

  9. Js屏蔽键盘事件

    <script>           function KeyDown(){ //屏蔽鼠标右键.Ctrl+n.shift+F10.F5刷新.退格键            //alert(& ...

随机推荐

  1. 显示和隐藏(display属性)none或block

    显示和隐藏(display属性) 网页中经常会看到显示和隐藏的效果,可通过display属性来设置. 语法: Object.style.display = value 注意:Object是获取的元素对 ...

  2. tensorflow识别验证码(2)-tensorflow 编写CNN 识别验证码

    1. 导入依赖包 #coding:utf-8 from gen_captcha import gen_captcha_text_and_image from gen_captcha import nu ...

  3. 转:浅析C++中的this指针

    原文出处:http://blog.csdn.net/starlee/article/details/2062586 有下面的一个简单的类: class CNullPointCall { public: ...

  4. Python全栈开发:进度条

    import sys import time for i in range(31): # 清空打印内容 sys.stdout.write("\r") # 控制输出样式 sys.st ...

  5. 学习 debug

    要在代码编辑器中设置源代码断点,有以下 4 种操作方式. (1) 把光标移到要设为断点的行上,按下 F5 键. (2) 用鼠标左键单击要设为断点的行的最左端. (3) 用鼠标右键单击要设为断点的行,在 ...

  6. uoj279 题目交流通道

    题目:告诉你每两个点之间的最短路距离.构造每条边边权<=m的无向完全图.求有多少种不同边权的图满足最短路限制?n<=400. 标程: #include<cstdio> #inc ...

  7. [JZOJ4673] 【NOIP2016提高A组模拟7.20】LCS again

    题目 描述 题目大意 给你一个字符串和字符的取值范围,问和这个字符串的最长公共子串的长度为N−1N-1N−1的串的个数. 思考历程 一看就知道这是一个神仙题. 思考了一会儿,觉得AC是没有希望的了. ...

  8. SpringBoot 04_热部署

    热部署应用环境 IDEA2017.2 + MAVEN3.5 + SpringBoot1.5.6 热部署说明 1. devtools会监听classpath下的文件变动,并且会立即重启应用(发生在保存时 ...

  9. 从0开始学习ssh之资源分类

    更目录下面,新建config用于放配置文件,新建test用于放置测试文件.src目录用于放置源代码.由于ssh是三层,因此新建三层包(dao,service,view).其中dao和service还有 ...

  10. 比特镇旅游(Tourist Attractions)【暴力+Bitset 附Bitset用法】

    Online Judge:NOIP2016十连测第一场 T2 Label:暴力,Bitset 题目描述 在美丽的比特镇一共有n个景区,编号依次为1到n,它们之间通过若干条双向道路连接. Byteasa ...