js基础_76、键盘事件
onkeydown
—-按键被按下
对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发。
当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，只会就会非常的快触发，这种设计是为了防止误操作的发生。
可以通过keycode来获取按键的编码，通过它可以判断哪个按键被按下。
通过事件对象即可调用该属性。
除了keycode，事件对象中还提供了几个属性
altkey
ctrlkey
shiftkey
—-这三个用来判断alt，ctrl和shift是否被按下，如果被按下则返回true，否则返回false。
在文本框中输入内容，属于onkeydown的默认行为，如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
onkeyup
—-按键被松开
键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document
比如：
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box1{
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
<script>
window.onload=function(){
//给document绑定键盘事件
document.onkeydown=function(event){
//判断m键是否被按下
// if(event.keyCode===77){
// console.log("m被按下");
// }
//判断m键和ctrl是否都同时被按下
if (event.keyCode===77&&event.ctrlKey) {
console.log("m和ctrl都同时被按下");
}
};
//键盘松开的事件
// document.onkeyup=function(){
// console.log("键盘被松开了");
// };
var myinput=document.getElementsByTagName("input")[0];
myinput.onkeydown=function(event){
//禁止在文本框中输入数字，
if(event.keyCode>=48&&event.keyCode<=57){//数字小键区的0-9是96-105
//在文本框中输入内容，属于onkeydown的默认行为
//如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
return false;
}
};
}
</script>
</head>
<body id="body" style="height: 2000px;">
<input type="text" />
</body>
</html>
练习：使div跟随键盘上的方向键移动。
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box1{
width: 100px;
height: 100px;
background-color: aqua;
position: absolute;
}
</style>
<script>
window.onload=function(){
var box1=document.getElementById("box1");
document.onkeydown=function(event){
event=event||window.event;
//38:上，40下，37左 39右
//定义一个变量speed，用来存移动的速度
var speed=10;
if(event.ctrlKey){
speed=50;
}
switch (event.keyCode){
case 38:
box1.style.top=box1.offsetTop-speed+"px";
break;
case 40:
box1.style.top=box1.offsetTop+speed+"px";
break;
case 37:
box1.style.left=box1.offsetLeft-speed+"px";
break;
case 39:
box1.style.left=box1.offsetLeft+speed+"px";
break;
}
return false;
};
}
</script>
</head>
<body id="body" style="height: 2000px;">
<div id="box1">
按ctrl键可加速移动
</div>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通