<!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'
default:
}
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>
![#你還會經常用筆寫字嗎#我不怎麼用筆寫字了。我寫小說都是用電腦。寫我所想，電腦跟的上。前些日子，我剛去電腦公司把鍵盤按鍵[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)