自上次做的鼠标拖动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. NOI 模拟赛 #2

    得分非常惨惨,半个小时写的纯暴力 70 分竟然拿了 rank 1... 如果 OYJason 和 wxjor 在可能会被爆踩吧 嘤 T1 欧拉子图 给一个无向图,如果一个边集的导出子图是一个欧拉回路, ...

  2. [冬令营模拟]GTSG2018

    上学期没有去 GTSG,于是今天老师让我们来做一下 GTSG2018 Day1 & Day3 Day1 在上午当成一场考试来搞了,Day3 由于锅太多而且 T3 玄学而被放到下午自学... 上 ...

  3. bzoj1059ZJOI2017矩阵游戏

    小Q是一个非常聪明的孩子,除了国际象棋,他还很喜欢玩一个电脑益智游戏——矩阵游戏.矩阵游戏在一个N *N黑白方阵进行(如同国际象棋一般,只是颜色是随意的).每次可以对该矩阵进行两种操作:行交换操作:选 ...

  4. 1030 Travel Plan (30)（30 分）

    A traveler's map gives the distances between cities along the highways, together with the cost of ea ...

  5. 洛谷【P2003】平板

    我对状态空间的理解:https://www.cnblogs.com/AKMer/p/9622590.html 题目传送门:https://www.luogu.org/problemnew/show/P ...

  6. PythonPath在Windows 下的设置

    今天在调试Evernote SDK时, 遇到PythonPath的问题. 查了很多资料,有说用系统环境变量添加PythonPath, 有说在注册表中的PythonPath添加新Default字段, 但 ...

  7. 最长递增子序列（LIS）

    最长递增子序列(Longest Increasing Subsequence) ,我们简记为 LIS. 题:求一个一维数组arr[i]中的最长递增子序列的长度,如在序列1,-1,2,-3,4,-5,6 ...

  8. POJ2689:素数区间筛选

    Prime Distance Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 15820   Accepted: 4202 D ...

  9. js数组中常用的几个API

    1.push:从末尾添加数据项. 2.pop:从末尾去除数据项. 3.shift:从开始去除数据项 4.splice: splice(m,n) m:指开始删除的索引位置  n:值删除几项 splice ...

  10. Ruby中的并行赋值和嵌套赋值

    一. Ruby 的赋值实际是以并行方式执行的,所以赋值语句右边的值不受赋值语句本身的影响.在左边的任意一个变量或属性赋值之前,右边的值按他们出现的顺序被计算出来. 1.当赋值语句有多于一个左值时,赋值 ...