前端 JavaScript -- 键盘按下松开事件
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了前端 JavaScript -- 键盘按下松开事件，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2262字，纯文字阅读大概需要4分钟。
内容图文
实现的主要功能：判断按下了哪个按键，可以实现部分内容输入文本框不显示通过判断按下键来条件输出return false；
所有的注释都在html中，解释的很详细，我就不再一一解释
注：这里我用的js是ES6 定义变量时采用let ES6以下替换为var即可
判断键盘按下的是哪个键
<script>
window.onload = function () {
/**
* 键盘事件不能绑定div，一般绑定给容易获取焦点的对象 eg：input
* onkeydown
* - 按下按键,如果一直按着会一直触发
* - 连续触发时，第一次和第二次间隔稍微长，以后就非常快
* onkeyup 松开按键，只会触发一次
*/
let test = document.getElementById("test");
document.onkeydown = function (event) {
event = event || window.event;
/**
* 通过keyCode属性返回的ASCII编码来判断按下的按键，注意区分大小写
* 事件单独提供了ctrlkey shiftkey altkey 用来判断ctrl、shift、alt是否被按下，
* 被按下时返回true
*/
if (event.keyCode === 89 && event.altKey){
console.log("我按下了y和 Alt")
}
//当文本框返回一个return false 取消默认行为时，文本框不再显示输入内容
/* *
*test.onkeydown = function () {
* return false;
* };
*/
};
};
</script>
<body>
<input type="text" id="test">
</body>
实现元素的移动，通过方向键进行控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素移动</title>
<style>
#box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<script>
/**
* css一定要开启position: absolute;
*/
window.onload = function () {
/**
* 通过方向键控制元素移动方向，按下ctrl实现加速
* 类似于贪吃蛇功能
*/
let box1 = document.getElementById("box1");
//移动速度
let speed = 10;
//设置移动的方向
let dir = 0;
//开启一个定时器，控制div移动
setInterval(function () {
/**
* 37 左
* 38 上
* 39 右
* 40 下
*/
switch (dir) {
case 37:
box1.style.left = box1.offsetLeft - speed +"px";
break;
case 38:
box1.style.top = box1.offsetTop - speed +"px";
break;
case 39:
box1.style.left = box1.offsetLeft + speed +"px";
break;
case 40:
box1.style.top = box1.offsetTop + speed +"px";
break;
}
},50);
//当键盘按下时改变元素移动方向
window.onkeydown = function (event) {
// 解决兼容性问题，兼容火狐 解决火狐找不到event问题
event = event||window.event;
//用户按下ctrl速度变快
if (event.ctrlKey){
speed = 50;
}else
{
speed = 10;
}
//现在官方有了更好的方法替代keyCode 但keyCode仍然可用
dir = event.keyCode;
};
//当键盘松开
window.onkeyup = function () {
dir = 0;
};
};
</script>
</head>
<body>
<div id="box1" ></div>
</body>
</html>
正在学习中，不足之处，感谢指正
内容总结
以上是互联网集市为您收集整理的前端 JavaScript -- 键盘按下松开事件全部内容，希望文章能够帮你解决前端 JavaScript -- 键盘按下松开事件所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】