转行学开发，代码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. vue.js学习记录

    vue.js学习记录 文章已同步我的github笔记https://github.com/ymblog/blog,欢迎大家加star~~ vue实例 生命周期 beforeCreate:不能访问thi ...

  2. C++编译器对属性的初始化检查远没有Java严格

    C++编译器对属性的初始化检查远没有Java严格// Java编译通过:class yy { public static void main(String[] args) { int i; Syste ...

  3. 剑指offer-二叉树的下一结点-树-python

    题目描述 给定一个二叉树和其中的一个结点,请找出中序遍历顺序的下一个结点并且返回.注意,树中的结点不仅包含左右子结点,同时包含指向父结点的指针.   思路:中序遍历,pNode节点的下一个节点根据中序 ...

  4. 使用form表单提交请求如何获取后台返回的数据？

    问题描述 一般的form表单提交是单向的:只能给服务器发送数据,但是无法获取服务器返回的数据,也就是无法读取HTTP应答包. 想要真正的半双工通讯一般需要使用Ajax, 但是Ajax对文件传输也很麻烦 ...

  5. maven项目出现红叉

    现象:maven项目出现红叉,同时项目中没出现代码错误 解决方案: 可尝试在本地maven项目pom.xml中添加如下: <build> <plugins> <plugi ...

  6. 十大基本功之testbench

      1. 激励的产生 对于testbench而言,端口应当和被测试的module一一对应.端口分为input,output和inout类型产生激励信号的时候,input对应的端口应当申明为reg, o ...

  7. 负载均衡的3种模型（httpd+lvs几十万并发的负载均衡搭建）

    一.几种常见的负载均衡模型 二.搭建httpd+lvs LVS .node01 启动一块eth0:2的网卡子接口(ifconfig eth0: down可以把网卡down掉) ifconfig eth ...

  8. ID 学习二 FILE I/O

    TCP CONNECT 此文件io工具用于打开和另外一台电脑的tcp/ip连接 电脑(本地网络.ip地址或者完整主机名称) Inputs Server ID 想要连接的主机名称或者IP地址 TCP P ...

  9. laplace transform 拉普拉斯变换

    参考网址: 1. https://en.wikipedia.org/wiki/First-hitting-time_model 2. https://en.wikipedia.org/wiki/Lap ...

  10. Codeforces 961 容斥叉积判共线 树状数组递增思想题

    A B C D 给你N个点 问你能不能有两条直线穿过这N个点 首先假设这N个点是可以被两条直线穿过的 所以两条直线就把这N个点划分成两个集合 我们取1 2 3三个点这样必定会有两个点在一个集合内 ch ...