转行学开发，代码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. 介绍一下 except 的作用和用法？

    except: #捕获所有异常 except: <异常名>: #捕获指定异常 except:<异常名 1, 异常名 2> : 捕获异常 1 或者异常 2 except:< ...

  2. SCUT - 483 - 数轴上的点

    https://scut.online/p/483 改了题目之后发现,其实n个点放在[1,2N],要求间距至少是2,那么有且只有一个点和前面点的间距是3(设-1存在一个点),其他点的间距都必须是2.排 ...

  3. 剑指offer-序列化和反序列化二叉树-树-python

    题目描述 请实现两个函数,分别用来序列化和反序列化二叉树   二叉树的序列化是指:把一棵二叉树按照某种遍历方式的结果以某种格式保存为字符串,从而使得内存中建立起来的二叉树可以持久保存.序列化可以基于先 ...

  4. java中使用SimpleDateFormat实现字符串和日期的相互转换

    java中使用SimpleDateFormat实现字符串和日期的相互转换 import java.text.ParseException; import java.text.SimpleDateFor ...

  5. 模型验证方法——R语言

    在数据分析中经常会对不同的模型做判断 一.混淆矩阵法 作用:一种比较简单的模型验证方法,可算出不同模型的预测精度 将模型的预测值与实际值组合成一个矩阵,正例一般是我们要预测的目标.真正例就是预测为正例 ...

  6. Windows及Android倍速播放视频软件下载

    目录 1. 更多推荐 2. 关键字 3. 按 4. 软件下载 4.1. IOS应用商店 4.2. 网盘下载 5. 软件介绍 5.1. PotPlayer(Windows) 5.2. MoboPlaye ...

  7. 关于<input type="hidden"/>标签的记录

    <input type="hidden" name="pid" value="10"/>标签放在一个input标签后可以使用,但 ...

  8. intel RDT技术管理cache和memory_bandwidth

    主页:https://www.intel.com/content/www/us/en/architecture-and-technology/resource-director-technology. ...

  9. du df的用法

    1,两者区别 du,disk usage,是通过搜索文件来计算每个文件的大小然后累加,du能看到的文件只是一些当前存在 的,没有被删除的.他计算的大小就是当前他认为存在的所有文件大小的累加和. df, ...

  10. springcloud 配置actuator

    pom.xml <!--Spring Boot Actuator,感应服务端变化--> <dependency> <groupId>org.springframew ...