<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件类型(键盘事件)</title>
<!--
onkeydown;键盘按下触发(比onkeypress先触发)
onkeypress;按下键盘按键时触发,只对字母/数字字符有效;在任何浏览器中,onkeypress 事件不会被所有按键触发(例如 ALT、CTRL、SHIFT、ESC)。
onkeyup;键盘松开触发
keyCode;返回onkeydown/onkeypress/onkeyup事件触发的键的值的字符代码,或键的代码
tip: onkeydown和onkeypress的区别:1)响应的按键不同;2)优先触发onkeydown,再执行onkeypress
-->
<style>
#inp{
width: 200px;
height: 80px;
}
</style>
</head>
<body>
<input id="inp" type="textarea">
<script>
var inp=document.getElementById("inp");
//onkeydown
inp.onkeydown=function (){
console.log("我按下了按键");//按下按键触发
}
//onkeypress
inp.onkeypress=function (event){
console.log("我按了字母/数字字符键");//按字母/数字/字符键触发
//keycode
console.log(event.keyCode);//返回按键得值的代码
}
//onkeyup
inp.onkeyup=function (){
console.log("我松开了按键");//松开按键触发
}
</script>
</body>
</html>