JavaScript中的onkeypress,onkeydown,onkeyup

最新推荐文章于 2023-05-03 21:45:30 发布

大大大大大大大大大大大大大大大大大大大大

最新推荐文章于 2023-05-03 21:45:30 发布

阅读量976

点赞数 1

分类专栏： JavaScript知识整理文章标签： Javascript

本文链接：https://blog.csdn.net/weixin_44260779/article/details/102057638

版权

JavaScript知识整理专栏收录该内容

5 篇文章 0 订阅

订阅专栏

onkeypress,onkeydown,onkeyup是js中的三种键盘事件.
onkeypress响应的是键盘按下的字符(keyCode是assic码,区分大小写,响应可以表达的字符)
onkeydown响应的是键盘按下的字符与功能键(不区分大小写,字符均视为大写,响应你按下的是什么键)
(知道为什么键盘上都是大写字母吗)
onkeyup响应的是键盘松开的字符与功能键(同上)
可以亲自试一下(谷歌浏览器)

<body>
onkeypress<input type="text" id="1">
onkeydown<input type="text" id="2">
onkeyup<input type="text" id="3">
<script>
   document.onkeypress=function(){
       document.getElementById("1").value=event.keyCode;
   }
   document.onkeydown=function(){
       document.getElementById("2").value=event.keyCode;
   }
   document.onkeyup=function(){
       document.getElementById("3").value=event.keyCode;
   }
</script>
</body>

用表单输出keyCode就可以知道每个事件响应的keyCode.

按下 			press	down	up
CapsLock		无响应	20		20
A(大小锁定)		65		65		65
a(小写)			97		65		65
空格				32		32		32
CTRL			无响应	17		17
F1				无响应	122		122
1				49 		49		49
1(小键盘)		49		97		97
回车				13		13		13
↑(小键盘)		无响应	38		38
Esc				无响应	27		27

一直按下键盘时onkeypress,onkeydown都会不断响应.
以叠加的方式表示(替换上文的代码)

document.onkeypress=function(){
    document.getElementById("1").value+=event.keyCode;
}
document.onkeydown=function(){
    document.getElementById("2").value+=event.keyCode;
}

并且onkeydown比onkeypress先响应
以叠加的方式表示(替换上文的代码)

document.onkeypress=function(){
    document.getElementById("1").value+=event.keyCode;
}
document.onkeydown=function(){
    document.getElementById("1").value+=event.keyCode;
}