键盘按键事件
作者：互联网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{ width: 100px; height: 100px; background-color: red; position: fixed; top: 50px; }
</style>
<script>
window.onload = function(){ /** * 使 div 可以根据不同的方向键 向不同的方向移动 * 按左键 div 向左移 * 按右键 div * ... * */ var box1 = document.getElementById("box1");
document.onkeydown = function(event){ event = event || window.event;
// 定义一个 变量 来表示 移动的速度 var speed = 10;
// 当用户按了 ctrl 以后， 速度加快 if(event.ctrlKey){ speed = 500; }
/** * 37 左 * 38 上 * 39 右 * 40 下 */ switch (event.keyCode) { case 37: // alert("向左"); // left 值减小 box1.style.left = box1.offsetLeft - speed + 'px' break; case 39: // alert("向右"); box1.style.left = box1.offsetLeft + speed + 'px' break; case 38: // alert("向上"); box1.style.top = box1.offsetTop - speed + 'px' break; case 40: // alert("向下"); box1.style.top = box1.offsetTop + speed + 'px' break; default: break; } if(event.key){
}
} /** * 键盘事件 * onkeydown * 按键被按下 * 对于onkeydown 来说 如果一直按着 某个按键不松手 则事件会一直触发 * 当onkeydown 连续触发时, 第一次和第二次之间会间隔稍微长一点，其他的会非常的快 * 这种设计 是为了 防止误操作的发生 * onkeyup * 按键被松开 * * 键盘事件一般 都会绑定给一些可以获取到焦点的对象 或者 document */
// document.onkeydown = function(event){ // event = event || window.event;
/** * 可以通过 keyCode 来获取按键的编码 * 通过它 可以判断哪个按钮被按下了 * 除了 keyCode 事件对象中还提供了几个属性 * altKey * ctrlKey * shiftKey * 这三个用来判断 alt ctrl 和 shift 是否被按下 * 如果按下则返回true,否则返回 false */
// 判读一个 y 是否被按下 // if(event.keyCode === 89){ // console.log('y被按下了'); // }
// 判断 y 和 ctrl 是否被同时按下 // if(event.keyCode === 89 && event.ctrlKey){ // console.log('ctrl+y都被按下了'); // }
// // console.log(event.keyCode); // }
// document.onkeyup = function(){ // console.log('按键松开了'); // }
// 获取input // var input = document.getElementsByTagName("input")[0]; // input.onkeydown = function(event){ // event = event || window.event; // // 数字 48-57 禁止输入数字 // if(event.keyCode >= 48 && event.keyCode <=57){ // // 取消默认行为 // return false; // } // 只能输入数字 // if(event.keyCode >= 48 && event.keyCode <=57){ // }else{ // // 取消默认行为 // return false; // } // console.log(event.keyCode); // } }
</script> </head> <body > <div id="box1"></div>
<input type="text"> </body> </html>
#box1{ width: 100px; height: 100px; background-color: red; position: fixed; top: 50px; }
</style>
<script>
window.onload = function(){ /** * 使 div 可以根据不同的方向键 向不同的方向移动 * 按左键 div 向左移 * 按右键 div * ... * */ var box1 = document.getElementById("box1");
document.onkeydown = function(event){ event = event || window.event;
// 定义一个 变量 来表示 移动的速度 var speed = 10;
// 当用户按了 ctrl 以后， 速度加快 if(event.ctrlKey){ speed = 500; }
/** * 37 左 * 38 上 * 39 右 * 40 下 */ switch (event.keyCode) { case 37: // alert("向左"); // left 值减小 box1.style.left = box1.offsetLeft - speed + 'px' break; case 39: // alert("向右"); box1.style.left = box1.offsetLeft + speed + 'px' break; case 38: // alert("向上"); box1.style.top = box1.offsetTop - speed + 'px' break; case 40: // alert("向下"); box1.style.top = box1.offsetTop + speed + 'px' break; default: break; } if(event.key){
}
} /** * 键盘事件 * onkeydown * 按键被按下 * 对于onkeydown 来说 如果一直按着 某个按键不松手 则事件会一直触发 * 当onkeydown 连续触发时, 第一次和第二次之间会间隔稍微长一点，其他的会非常的快 * 这种设计 是为了 防止误操作的发生 * onkeyup * 按键被松开 * * 键盘事件一般 都会绑定给一些可以获取到焦点的对象 或者 document */
// document.onkeydown = function(event){ // event = event || window.event;
/** * 可以通过 keyCode 来获取按键的编码 * 通过它 可以判断哪个按钮被按下了 * 除了 keyCode 事件对象中还提供了几个属性 * altKey * ctrlKey * shiftKey * 这三个用来判断 alt ctrl 和 shift 是否被按下 * 如果按下则返回true,否则返回 false */
// 判读一个 y 是否被按下 // if(event.keyCode === 89){ // console.log('y被按下了'); // }
// 判断 y 和 ctrl 是否被同时按下 // if(event.keyCode === 89 && event.ctrlKey){ // console.log('ctrl+y都被按下了'); // }
// // console.log(event.keyCode); // }
// document.onkeyup = function(){ // console.log('按键松开了'); // }
// 获取input // var input = document.getElementsByTagName("input")[0]; // input.onkeydown = function(event){ // event = event || window.event; // // 数字 48-57 禁止输入数字 // if(event.keyCode >= 48 && event.keyCode <=57){ // // 取消默认行为 // return false; // } // 只能输入数字 // if(event.keyCode >= 48 && event.keyCode <=57){ // }else{ // // 取消默认行为 // return false; // } // console.log(event.keyCode); // } }
</script> </head> <body > <div id="box1"></div>
<input type="text"> </body> </html>
标签：speed,onkeydown,keyCode,键盘,事件,按键,document,box1,event 来源： https://www.cnblogs.com/eric-share/p/14737097.html