实现的主要功能：判断按下了哪个按键，可以实现部分内容输入文本框不显示通过判断按下键来条件输出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>
正在学习中，不足之处，感谢指正