【javascript基础】keypress keydown keyup的区别
2012-11-13 11:02 sniper007 阅读(475) 评论(0) 编辑 收藏 举报KeyDown:在控件有焦点的情况下按下键时发生。
KeyPress:在控件有焦点的情况下按下键时发生。(下面会说和KeyDown 的区别)
KeyUp:在控件有焦点的情况下释放键时发生。
二、促发的顺序:
-
KeyDown
-
KeyPress
-
KeyUp
<script type="text/javascript">
function $(str){
return document.getElementById(str);
}
$("wrap")["onkeyup"] = function(){
console.log("促发的是keyup");
console.warn("-------------------------------------");
};
$("wrap")["onkeypress"] = function(){
console.log("促发的是keypress");
};
$("wrap")["onkeydown"] = function(){
console.log("促发的是keydown");
};
</script>
三、三者之间的区别:
KeyDown 和KeyUp 通常可以捕获键盘除了PrScrn所有按键(这里不讨论特殊键盘的特殊键)
demo:
下面的例子就测试下大小写,其他的可以自己测试,我前后输入大小写的q、Q,结果如下图,keypress区分大小写,并且通过charCode反应出来,keydown,keyup不区分大小写,前后keyCode都一样
<script type="text/javascript">
function $(str){
return document.getElementById(str);
}
$("wrap")["onkeyup"] = function(event){
event = event || window.event;
console.info(event);
console.log("促发的是keyup");
console.warn("-------------------------------------");
};
$("wrap")["onkeypress"] = function(event){
event = event || window.event;
console.info(event);
console.log("促发的是keypress");
};
$("wrap")["onkeydown"] = function(event){
event = event || window.event;
console.info(event);
console.log("促发的是keydown");
};
</script>
2.KeyPress 只能捕获单个字符KeyDown 和KeyUp 可以捕获组合键。
3.KeyPress 可以捕获单个字符的大小写(详见第一个区别)
4.KeyDown和KeyUp 对于单个字符捕获的KeyValue 都是一个值,也就是不能判断单个字符的大小写。
5.KeyPress 不区分小键盘和主键盘的数字字符。KeyDown 和KeyUp 区分小键盘和主键盘的数字字符。
我依次按主键盘1,小键盘1,区别如下
6.其中PrScrn 按键KeyPress、KeyDown和KeyUp 都不能捕获。
补充知识:键码、字符编码概念
键码:在发生keydown和keyup事件时,event对象的keyCode属性中会包含一个代码,与键盘上的一个特定的键相对应。对数字字母符键,keyCode属性的值与ASCII码中对应小写字母或者数字的编码相同。 因此,数字键7的keyCode的值为55,而字母A的keyCode的值是65,与shift键无关,DOM和IE的event对象都支持keyCode属性。
注意点:
1、在firefox和opera中,分号的keyCode为59,就是ASCII编码,但IE、safari返回186,即键盘中按键的键码。
2、在safari3之前的版本中,上、下、左、右箭头和上、下翻页键返回大于63000的值。
3、在opera9.5之前的版本中,会将非数字字母键的keyCode设置为等于相应字符的ASCII的编码,因此小于键返回44而不是188.这会影响到能产生一个非数字字母字符的所有键。
4、在safari3之前的版本中,不会因为按下制表、上档、控制或者替代键而促发keydown和keyup事件。
字符编码:
发生keypress事件意味着按下的键会影响到屏幕中文本的显示。
firefox,chrome,safari的event对象都支持一个keyCode的属性,这个属性只有在发生keypress事件时才包含值,而且这个值是按下的那个键所代表字符的ASCII的值。此时的keyCode等于0或者键的码值。IE和opera则是在keyCode中保存字符的ASCII编码。所以,兼容各种浏览器,代码如下:
var ret;
typeof event.charCode == "number" ? ret = event.charCode : ret = event.keyCode;
return ret;
}
参考文档:
http://blog.sina.com.cn/s/blog_5e3a1bbb0100esv3.html
《javascript高级程序设计》第2版,第十二章事件 12.4.3键盘事件