转行学开发，代码100天——2018-05-03

今天继续学习JavaScript事件基础之键盘事件。

键盘代号获取 keyCode

键盘事件：onkeydown onkeyup

如通过键盘上下左右按键操控物体移动的应用

<!DOCTYPE html>

<html>

<head>

    <title>javascript 键盘事件</title>

    <style type="text/css">

        #div1{width: 100px;height: 100px;background: #ccc;position: absolute;}

    </style>

    <script type="text/javascript">

        window.onkeydown = function(ev){

            var oEvent = ev||event;

            // alert(oEvent.keyCode);

            var oDiv = document.getElementById("div1");

            if (oEvent.keyCode==37) { //向左

                oDiv.style.left = oDiv.offsetLeft-10+"px";

            }else if(oEvent.keyCode==39) //向右

            {

                oDiv.style.left = oDiv.offsetLeft+10+"px";

            }else if(oEvent.keyCode==38) //向上

            {

                oDiv.style.top = oDiv.offsetTop-10+"px";

            }else if(oEvent.keyCode==40) //向下

            {

                oDiv.style.top = oDiv.offsetTop+10+"px";

            }

        };

    </script>

</head>

<body>

<div id="div1"></div>

</body>

</html>

其他常用的几个键盘按钮

enter  keyCode==13

ctrlKey

shiftKey

altKey

如一个通过CTRL+ENTER进行文本提交的功能

类似的功能之前通过一个按钮实现，即是为其添加一个点击事件，如果去除按钮，需要对文本输入框添加一个键盘事件。

下面的代码中注释部分为按钮实现，保留部分是enter键实现。

    oTxt1.onkeydown = function(ev){

                var  oEvent = ev||event;

                if (oEvent.keyCode==13 &&oEvent.ctrlKey) {

                    oTxt2.value +=oTxt1.value+"\n";

                      oTxt1.value="";

                }

            }
<!DOCTYPE html>

<html>

<head>

    <title>键盘发ctrl+enter布效果</title>

    <script type="text/javascript">

        window.onload = function()

        {

            var oTxt1 = document.getElementById("txt1");

            var oTxt2 = document.getElementById("txt2");

            // var oBtn = document.getElementById("btn");

            // oBtn.onclick = function()

            // {

            //     oTxt2.value +=oTxt1.value+"\n";

            //     oTxt1.value="";

            // }

            oTxt1.onkeydown = function(ev){

                var  oEvent = ev||event;

                if (oEvent.keyCode==13) {

                    oTxt2.value +=oTxt1.value+"\n";

                      oTxt1.value="";

                }

            }

        }

    </script>

</head>

<body>

<input id="txt1" type="text" name="">

<!-- <input id="btn" type="button" value="发布" > -->

<br/><br/>

<textarea id="txt2"></textarea>

</body>

</html>

如果改成ctrl+enter时只需要在判断条件中添加oEvent.ctrlKey

    oTxt1.onkeydown = function(ev){

                var  oEvent = ev||event;

                if (oEvent.keyCode==13 &&oEvent.ctrlKey) {

                    oTxt2.value +=oTxt1.value+"\n";

                      oTxt1.value="";

                }

            }

day48—JavaScript键盘事件的更多相关文章

  1. JavaScript键盘事件全面控制代码

    JavaScript键盘事件全面控制,它可以捕获键盘事件的输入状态,可以判断你敲打了键盘的那个键,ctrl.shift,26个字母等等,返回具体键盘值. <html> <head&g ...

  2. javascript 键盘事件总结

    原文:http://www.cnblogs.com/rubylouvre/archive/2009/08/20/1550526.html#2583814 在进入正题前,我们看一下浏览器对于键盘的一些默 ...

  3. Javascript 键盘事件

    window.document.onkeydown = function (e) { var evt = window.event || e;//兼容性处理 var keycode = evt.key ...

  4. JavaScript的事件对象_键盘事件

    用户在使用键盘时会触发键盘事件.“DOM2 级事件”最初规定了键盘事件,结果又删除了相应的内容.最终还是使用最初的键盘事件,不过 IE9 已经率先支持“DOM3”级键盘事件. 一.键码 在发生 key ...

  5. javascript的键盘事件大全

    javascript的键盘事件大全 ------------------------------------------------------------------- 使用event对象的keyC ...

  6. JavaScript事件基础-10-2.HTML事件; DOM0级事件; 掌握常用的鼠标与键盘事件 ; 掌握this的指向;

    JavaScript事件基础 学习目标 1.掌握什么是事件 2.掌握HTML事件 3.掌握DOM0级事件 4.掌握常用的鼠标与键盘事件 5.掌握this的指向 什么是事件 事件就是文档或浏览器窗口中发 ...

  7. JavaScript的事件对象中的特殊属性和方法（鼠标，键盘）

    鼠标操作导致的事件对象中的特殊属性和方法 鼠标事件是 Web 上面最常用的一类事件,毕竟鼠标还是最主要的定位设备.那么通过事件对象可以获取到鼠标按钮信息和屏幕坐标获取等 鼠标按钮 只有在主鼠标按钮被单 ...

  8. JavaScript的事件的处理函数（鼠标，键盘，HTML）

    事件处理函数概述 JavaScript 可以处理的事件类型为:鼠标事件.键盘事件.HTML 事件 所有的事件处理函数都会都有两个部分组成,on + 事件名称,例如 click 事件的事件处理函数就是: ...

  9. JavaScript onkeydown事件入门实例(键盘某个按键被按下)

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

随机推荐

  1. PCIe事务层包TLP Header详解

    1.事务层包的一般格式: 包的header为3DW(double word)或者4DW(一个DW代表4字节),数据负载为1~1024DW(即4~4096byte,最大4M),TLP Digest可选, ...

  2. 简洁的Asp.net菜单控件

    http://www.cnblogs.com/ruinet/archive/2009/11/10/1599984.html asp.net自带的菜单控件采用的table和javascript,导致生成 ...

  3. rev 反向输出文件内容

    1.命令功能 rev 按行反向输出文件内容 2.语法格式 rev  file 3.使用范例 [root@localhost ~]# echo {a..k} >> test [root@lo ...

  4. UVa11806 Cheerleaders（容斥原理）

    11806 - Cheerleaders Time limit: 2.000 seconds C Cheerleaders In most professional sporting events, ...

  5. 移动端适配 rem

    前置知识: 物理像素(physical pixel,device pixel) 物理像素(设备像素),显示设备中一个最微小的物理部件.每个像素可以根据操作系统设置自己的颜色和亮度. 设备独立像素(de ...

  6. 谷歌将用QUIC传输层技术加速互联网

    安全这个话题,要感谢斯诺登,过去的安全就是攻和防之间的关系,即我们用一种什么样的体系.架构和模式去构建一个密不可破的安全系统.” 对IETF工作组忽视外部观察者看起来是一件甚么微不足道的事情的能力感到 ...

  7. 《扩展和嵌入python解释器》1.4 模块方法表和初始化函数

    <扩展和嵌入python解释器>1.4 模块方法表和初始化函数   1.4 模块方法表和初始化函数 下面,我演示如何从Python程序调用spam_system().首先,我们需要在’方法 ...

  8. ES6 Module（模块）

    1.export命令 一个模块就是一个独立的文件. 该文件内部的所有变量,外部无法获取. 如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量. 下面是一个 JS 文件,里 ...

  9. SSH自动登录脚本

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11926792.html vi app-stg.sh #!/usr/bin/expect -f #aut ...

  10. 【usaco 2013 open yinyang】阴阳

    题目 Farmer John 正在在计划自己的农场漫步.他的农场的结构就像一棵树:农场有N个谷仓(1<= N <=100,000),分别由N-1条路链接.这样,他便可以通过这些谷仓间的道路 ...