### 键盘事件
- `keyCode`
- 获取用户按下键盘的哪个键：`onkeydown` / `onkeyup`
- 例子：键盘控制 `Div` 移动
- 其它属性
- `ctrlKey`、`shiftKey`、`altKey`
- 例子：提交留言
- 回车提交
- CTRL + 回车 提交
- 代码：
```HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>键盘控制元素移动和回车提交</title>
<link rel="stylesheet" href="../reset.css">
<style>
/* 评论区 */
#div_comments {
position: absolute;
display: block;
padding-top: 20px;
width: 640px;
background-color: rgb(252, 229, 200);
}
#div_com_inp {
margin-top: 5px;
border-top: burlywood dashed 1px;
border-bottom: burlywood dashed 1px;
}
.text {
margin: 20px 0 20px 53px;
}
.btn {
margin: 20px 0 20px 20px;
width: 70px;
height: 70px;
}
#div_com_show {
height: 200px;
margin: 20px 50px;
padding: 0px 20px;
background-color: rgb(255, 255, 255);
overflow: hidden;
}
.li_comment {
white-space: pre-wrap;
padding: 10px 5px;
float: none;
border-bottom: cadetblue dashed 1px;
opacity: 0;
filter: alpha(opacity=0);
overflow: hidden;
}
</style>
<script>
// 封装 getElementById 函数
function get(id) {
return document.getElementById(id);
}
window.onload = function () {
// var oDiv = get('div1');
// document.onkeydown = function () {
// var ev = event||ev;
// if (ev.keyCode === 37) {
// oDiv.style.left = oDiv.offsetLeft - 10 + 'px'
// } else if (ev.keyCode === 39) {
// oDiv.style.left = oDiv.offsetLeft + 10 + 'px'
// } else if (ev.keyCode === 38) {
// oDiv.style.top = oDiv.offsetTop - 10 + 'px'
// } else if (ev.keyCode === 40) {
// oDiv.style.top = oDiv.offsetTop + 10 + 'px'
// }
// }
//获取Div元素
var oDiv = document.getElementById("div_comments");
//创建各个方向条件判断初始变量
var left = false;
var right = false;
var top = false;
var bottom = false;
//当按下对应方向键时，对应变量为true
document.onkeydown = function(ev){
var oEvent = ev || event;
var keyCode = oEvent.keyCode;
switch(keyCode){
case 37:
left=true;
break;
case 38:
top=true;
break;
case 39:
right=true;
break;
case 40:
bottom=true;
break;
}
};
//设置一个定时，时间为50左右，不要太高也不要太低
setInterval(function(){
//当其中一个条件为true时，则执行当前函数（移动对应方向）
if(left){
oDiv.style.left = oDiv.offsetLeft-10+"px";
}else if(top){
oDiv.style.top = oDiv.offsetTop-10+"px";
}else if(right){
oDiv.style.left = oDiv.offsetLeft+10+"px";
}else if(bottom){
oDiv.style.top = oDiv.offsetTop+10+"px";
}
},30);
//执行完后，所有对应变量恢复为false，保持静止不动
document.onkeyup = function(ev){
var oEvent = ev || event;
var keyCode = oEvent.keyCode;
switch(keyCode){
case 37:
left=false;
break;
case 38:
top=false;
break;
case 39:
right=false;
break;
case 40:
bottom=false;
break;
}
}
// btn 提交
var btn = get('btn_comment');
var txt = get('text_comment');
var board = get('div_com_show');
btn.onclick = function () {
if (true) {
var oP = document.createElement('p');
oP.innerHTML = txt.value;
txt.value = '';
if (board.children.length > 0) {
board.insertBefore(oP,board.children[0])
} else {
board.appendChild(oP);
}
}
}
// ctrl + enter 提交
txt.onkeydown = function (ev) {
var ev = ev||event;
if (ev.keyCode === 13 && ev.ctrlKey) {
var oP = document.createElement('p');
oP.innerHTML = txt.value;
txt.value = '';
if (board.children.length > 0) {
board.insertBefore(oP,board.children[0])
} else {
board.appendChild(oP);
}
}
}
}
</script>
</head>
<body>
<div id="div_comments">
<div id="div_com_inp">
<textarea class="text" name="" id="text_comment" cols="60" rows="5"></textarea>
<input class="btn" type="button" name="" id="btn_comment" value="发表评论">
</div>
<div id="div_com_show">
<p>CTRL + 回车 提交</p>
<p>键盘控制留言框位置</p>
</div>
</div>
</body>
</html>
```
- 前言
- 初探 JavaScript 魅力
- JavsScript 是什么
- 第一个 JS 特效：鼠标提示框
- 网页换肤和 if 判断
- 函数传参
- 循环 while 和 for
- 导航栏选项卡
- JS 简易日历
- JavaScript 基础
- JavaScript 组成
- 变量类型
- 变量类型转换
- 变量的作用域和闭包
- 命名规范
- 运算符
- 程序流程控制
- JSON
- 深入 JavaScript
- 函数返回值
- 函数传参与行间样式
- 数组基础操作
- 定时器的使用
- 定时器的作用
- 数码时钟
- Date 对象其它方法
- 延时提示框
- 无缝滚动
- DOM基础应用
- DOM 基础
- DOM 节点
- 操作元素属性
- DOM 元素灵活查找
- DOM 操作应用
- 创建、插入和删除元素
- 文档碎片
- DOM操作应用高级
- 表格标签
- 表格应用
- 表单应用
- JS 运动基础
- 运动基础
- 运动框架及应用
- 缓冲运动
- 运动的停止条件
- JS 运动应用
- 多物体运动框架
- 任意值运动框架
- 仿 Flash 图片展示
- JS 运动中级
- 链式运动框架
- 完美运动框架
- 运动框架总结
- 运动框架应用
- JS事件基础
- Event 对象和事件
- 鼠标事件
- 键盘事件
- JS 事件中级
- 默认事件
- 拖拽
- JS 事件高级应用
- 事件绑定
- 高级拖拽
- 自定义滚动条
- Ajax 基础
- Ajax 是什么
- 使用 Ajax
- Ajax 原理
- Ajax 中级
- 编写 Ajax
- Ajax 数据
- JS 面对对象基础
- 面对对象是什么
- JS 中的面对对象
- 第一个面对对象的程序
- 工厂方式
- 原型：Prototype
- 面对对象编程方式
- JS 面对对象实例
- 面对对象的选项卡
- JS 面对对象高级
- Json 方式的面向对象
- 拖拽和继承
- 使用继承
- 系统对象
- BOM 应用
- BOM 基础
- 尺寸及坐标
- 常用方法和事件
- COOKIE 基础与应用
- 什么是 cookie
- 使用 cookie
- JS 中的正则表达式
- 正则表达式基础
- 字符串与正则配合
- 字符串
- 量词
- 常用正则例子
- JS Template 模板引擎
- 特性
- 语法
- 实例
- 表达式和运算符分类
- 主要表达式
- 左表达式
- 自增和自减
- 一元运算符
- 算术运算符
- 关系运算符
- 相等运算符
- 位移运算符
- 二进制位运算符
- 二元逻辑运算符
- 条件(三元)运算符
- 赋值运算符