键盘事件
onkeydown 按键按下,如果一直按着某个按键不松手,则事件会一直触发,如果连续触发时,第一次和第二次直接会间隔稍微长一点,其他的会非常快,这种设计是为了防止误操作发生
onkeyup 按键松开,键盘事件一般都会绑定给一些可以获取焦点的对象或者是document
可以通过keyCode来获取按键的编码,通过它可以判断哪个按键被按下
除了keyCode,事件对象中还提供了几个属性:
altKey ctrlKey shiftKey这三个用来判断alt ctrl shift是否被按下,按下返回true
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload=function(){
document.onkeydown=function(event){
event=event || window.event;
//判断y键是否被按下,先获取y的编码89
if(event.keyCode===89){
console.log("y被按下");
}
//判断y和ctrl是否同时被按下
if(event.keyCode===89 && event.ctrlKey){
console.log("ctrl和y同时被按下");
}
}
document.onkeyup=function(){
console.log("松开")
}
//获取input
var input=document.getElementsByTagName("input")[0];
input.onkeydown=function(event){
console.log("按键被按下");
//在文本框不能输入数字
event=event || window.event;
//数字的keyCode是48-57
if(event.keyCode>=48 && event.keyCode<=57){
//在文本框中输入内容,属于onkeydown的默认行为
//如果在onkeydown取消了默认行为,则输入的内容,不会出现在文本框中
return false;
}
}
}
</script>
</head>
<body>
<input type="text">
</body>
</html>
练习:使div可以根据不同的方向键向不同的方向移动,左键向左移右键向右移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<script>
//使div可以根据不同的方向键向不同的方向移动,左键向左移右键向右移
window.onload=function(){
var box1=document.getElementById("box1");
document.onkeydown=function(event){
event=event || window.event;
//定义一个变量表示移动的速度
var speed=10;
//当用户按了ctrl以后速度加快
if(event.ctrlKey){
speed=50;
}
//左上右下按键keyCode是37-40
switch(event.keyCode){
case 37:box1.style.left=box1.offsetLeft-speed+"px";break;
case 39:box1.style.left=box1.offsetLeft+speed+"px";break;
case 38:box1.style.top=box1.offsetTop-speed+"px";break;
case 40:box1.style.top=box1.offsetTop+speed+"px";break;
}
}
}
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>