matlab按键按下和松开,前端 JavaScript -- 键盘按下松开事件

实现的主要功能：判断按下了哪个按键，可以实现部分内容输入文本框不显示通过判断按下键来条件输出return false；

所有的注释都在html中，解释的很详细，我就不再一一解释

注：这里我用的js是ES6 定义变量时采用let ES6以下替换为var即可

判断键盘按下的是哪个键

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;

* };

*/

};

};

实现元素的移动，通过方向键进行控制

元素移动

#box1{

width: 100px;

height: 100px;

background-color: red;

position: absolute;

}

/**

* 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;

};

};

正在学习中，不足之处，感谢指正

标签：function,--,box1,JavaScript,window,按下,speed,event

来源： https://blog.csdn.net/chang100111/article/details/113802185