JS事件类型-键盘事件

最新推荐文章于 2023-08-06 20:22:48 发布

qq_29209481

最新推荐文章于 2023-08-06 20:22:48 发布

阅读量196

点赞数

本文链接：https://blog.csdn.net/qq_29209481/article/details/79274136

版权

//感谢杨老师

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>键盘事件</title>
<style type="text/css">
#box { position: absolute; top: 0; left: 0; width: 100px; height: 100px; background: #ccc; }
</style>
</head>
<body>
<div id="box"></div>
</body>
<script type="text/javascript">

var box = document.querySelector("#box");

//当用户按下键盘上的任意键时触发,按住不动将重复触发
document.onkeydown = function (event){
var event = event || window.event;
console.log("charCode:"+event.charCode)
console.log("keyCode:"+event.keyCode)
console.log('char:'+String.fromCharCode(event.keyCode))
console.log('isShiftCtrlAlt:'+event.shiftKey||event.altKey||event.ctrlKey)
switch (event.keyCode){
case 37: //键值
//左
box.style.left = box.offsetLeft - 2 + "px";
break;
case 38:
//上
box.style.top = box.offsetTop - 2 + "px";
break;
case 39:
//右
box.style.left = box.offsetLeft + 2 + "px";
break;
case 40:
//下
box.style.top = box.offsetTop + 2 + "px";
break;
}

var keys = [];

if (event.shiftKey){
keys.push("shift");
}
if (event.ctrlKey){
keys.push("ctrl");
}
if (event.altKey){
keys.push("alt");
}
console.log("Keys: " + keys.join(","));
}

//释放键盘按键
document.onkeyup = function (event){
console.log("释放按键");
}

//当用户按下键盘上的字符键时触发,按住不动将重复触发
document.onkeypress = function (event){

var event = event || window.event;
console.log("keyCode:"+event.keyCode);
console.log("charCode:"+event.charCode);
// alert(String.fromCharCode(event.charCode)); //转换键值

}

</script>
</html>

qq_29209481

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS事件类型-键盘事件

//感谢杨老师键盘事件#box { position: absolute; top: 0; left: 0; width: 100px; height: 100px; background: #ccc; }var box = document.querySelector("#box");//当用户按下键盘上的任意键时触发,按
复制链接

扫一扫