自上次做的鼠标拖动Div之后，看到fgm.cc的例子，发现用键盘操控Div貌似也是十分有趣，这些DOM操作随着jquery的没落，虽然渐渐少用了，不过有些DOM操作还是必不可少的。现在是虽然数据为王（一切以数据渲染为主）的时代，可是只要涉及到体验，我觉得还是会用到DOM操作的。

这个例子比较简单，具体的代码链接： https://github.com/dirstart/js-exam/blob/master/%E9%94%AE%E6%8E%A7div.html

这里需要提及的知识点是：event.keyCode 返回的是 Number 类型。

当我用 case '37': //todo发现没有反应，试了一下 case 37: //todo就可以了。

JS键盘事件之键控Div的更多相关文章

  1. js键盘事件全面控制详解

      js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件 ...

  2. js键盘事件全面控制

    js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...

  3. js键盘事件全面控制详解【转】

    js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...

  4. Js键盘事件全面控制，回车按键事件，键盘对应按键码，按键事件兼容各个浏览器。

    在网上查询的按键码如下: 一.键盘按键和键盘对应代码表:   字母按键码A <--------> 65 B <--------> 66 C <--------> 6 ...

  5. js键盘事件和焦点事件

    键盘事件onkeydown //当键盘按下的时候触发onkeyup //但键盘抬起的时候触发event.keyCode //数字类型 键盘按键的键值功能键 ctrlkey shiftkey altke ...

  6. JS键盘事件对象之keyCode、charCode、which属性对比

    先说一些有关键盘事件的事项:用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown. onkeypress和onkeyup这 ...

  7. 关于js键盘事件的例子

    JavaScript onkeydown 事件 用户按下一个键盘按键时会触发 onkeydown 事件.与 onkeypress事件不同的是,onkeydown 事件是响应任意键按下的处理(包括功能键 ...

  8. js键盘事件

    弱鸡今天在写键盘事件,发生一个小bug,排查了1小时(">皿<)可恶的浏览器竟然还不报错!!原因是将e.ctrlKey写成了e.ctrLKey,o(ﾟДﾟ)っ 想想都要生气< ...

  9. 2018.12/6 js键盘事件 DOM：0级2级

    DOM0级事件元素绑定多个click最后只执行最后一个click. DOM2级事件元素绑定多个click,都要执行 注意当绑定的多个事件名,函数名,事件发生阶段三者完全一样时,才执行最后一个 div. ...

随机推荐

  1. 解决编译warning：warning: ‘MeteringUnit::voltage_gain_’ will be initialized after [-Wreorder]

    问题: 环境:ubuntu 12.04,g++版本4.6.3,编译目标文件时出现warnings: u1204@u1204-zhw:~/hwsvn/2sw/4prj_mips/UCP_rt5350/s ...

  2. freeMarker（五）——模板开发指南补充知识

    学习笔记,选自freeMarker中文文档,译自 Email: ddekany at users.sourceforge.net 模板开发指南补充知识 1. 自定义指令 自定义指令可以使用 macro ...

  3. Arc077_E Guruguru

    传送门 题目大意 有$m$个点编号从小到大按照顺时针编成了一个环,有一枚棋子,每次移动可以选择顺时针移动到下一个或者直接移动到编号为$x$的点,现在有$n-1$次数操作,第$i$次要把棋子从第$A_i ...

  4. 1143. Lowest Common Ancestor (30)

    The lowest common ancestor (LCA) of two nodes U and V in a tree is the deepest node that has both U ...

  5. 洛谷【P2115】[USACO14MAR]破坏Sabotage

    我对二分的理解:https://www.cnblogs.com/AKMer/p/9737477.html 题目传送门:https://www.luogu.org/problemnew/show/P21 ...

  6. Swift访问控制

    参考博客原文链接 http://www.jianshu.com/p/604305a61e57 http://www.hangge.com/blog/cache/detail_524.html 我的总结 ...

  7. kafka之一：Windows上搭建Kafka运行环境

    搭建环境 1. 安装JDK 1.1 安装文件:http://www.oracle.com/technetwork/java/javase/downloads/jre8-downloads-213315 ...

  8. angular-cli.json配置参数解析，常用命令解析

    1.angular-cli.json配置参数解析 { "project": { "name": "ng-admin", //项目名称 &qu ...

  9. Mac搭建nginx+rtmp服务器

    nginx是非常优秀的开源服务器,用它来做hls或者rtmp流媒体服务器是非常不错的选择,本人在网上整理了安装流程,分享给大家并且作备忘. 一.安装Homebrow 已经安装了brow的可以直接跳过这 ...

  10. stm32与三菱PLC通信

    一.三菱PLC通讯概要   三菱PLC FX系列通信结构如下图所示: 三菱PLC FX系列的通信规格如下图所示: 三菱PLC FX系列一般有以下几种通信模块,以FX2N为例: FX2N-232-BD ...