onkeyup,onkeydown和onkeypress动作区别

2019年08月24日 07:26:26益点益滴4949

js按键事件onkeyup,onkeydown和onkeypress的区别简单来说,onkeydown 、onkeypress事件响应的时候输入的字符并没有被系统接受,而响应onkeyup的时候,输入流已经被系统接受。

onkeydown和onkeypress具体区别: 

 一个放开一个没有放开,onkeydown 先于 onkeypress 发生; 
onkeydown 捕获的 keyCode 不区分字母大小,而 onkeypress 区分;
onkeypress是在用户按下并放开任何字母数字键时发生,系统按钮(例如,箭头键和功能键)无法得到识别;

onkeyup和onkeydown具体区别

onkeyup 是在用户放开任何先前按下的键盘键时发生;
onkeydown 是在用户按下任何键盘键(包括系统按钮,如箭头键和功能键)时发生;

从名字上也能看出一些区别:keydown意指键盘被按下触发,keyup意指键盘松开被触发,keypress则是按键被按压。

三者执行顺序:keydown < keypress < keyup ;

keypress只能监听字母和数字,不能监听一些特殊按键(如Ctrl、Shift、箭头等);

keydown捕获的键值不区分字母大小写,而keypress区分,例如,直接按下A键,keydown打印65,keypress打印97,当Caps打开时,keydown和keypress都是打印65;

keydown和keypress如果不松开会一直触发,keyup会直到松开才会触发;

另外需要说明一点,keypress在谷歌和IE无法监听上下左右箭头,但是火狐不按常规出牌,可以监听。不过这是早期版本的问题,新版可能已不存在区别。

测试代码

<html> 
<body>
<p>请按任意键开始测试</p>
<p>onkeydown:<input type="text" id="onkeydown"></p>
<p>onkeyup:<input type="text" id="onkeyup"></p>
<p>onkeypress:<input type="text" id="onkeypress"></p>
<script> 
document.onkeydown = function(e){
	document.getElementById("onkeydown").value=e.keyCode;
};
document.onkeyup = function(e){
	document.getElementById("onkeyup").value=e.keyCode;
};
document.onkeypress = function(e){
	document.getElementById("onkeypress").value=e.keyCode;
};
</script>
</body> 
</html>


超赞,真给力!嗯,必须鼓励~

打赏0
账号:mxy310@163.com[复制]
账号:77940140[复制]