转行学开发，代码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. P2523 [HAOI2011]Problem c

    传送门 先考虑如何判断无解,设 $sum[i]$ 表示确定的人中,编号大于 $i$ 的人的人数 如果 $sum[i]>n-i+1$ 则无解,进一步考虑设 $f[i][j]$ 表示当前确定完编号大 ...

  2. js日期格式验证

    js日期格式验证 <input type="text" maxLength='10' onkeyup='checkDate(this.value,jQuery(this)); ...

  3. 如何将一个.NET Core类库发布到NuGet

    包治百病 | 如何将一个.NET Core类库发布到NuGet 写文章 包治百病 | 如何将一个.NET Core类库发布到NuGet Edi Wang发表于汪宇杰博客订阅 77 NuGet是.NET ...

  4. asp.net后台cs中的JSON格式变量在前台Js中调用方法

    //后台cs代码: using System; using System.Collections.Generic; using System.Linq; using System.Web; using ...

  5. Site error: the ionCube PHP Loader needs to be installed.解决办法

    问题描述: 有些模块的作者为了保护代码而采用ionCube加密的代码,所以这里必须给服务器装上这个php的扩展,就好像以前的zend一样 解决办法: http://bbs.52jscn.com/thr ...

  6. Apache 的 httpd.conf 配置文件

    http.conf 是 Apache 的配置文件,Apache 的常见配置主要是通过修该文件实现的,修改之后需要 重启 Apache 服务生效. Httpd.conf #Apache 安装目录 Ser ...

  7. fpga配置方式 .jic固化为ps模式

    FPGA不同下载方式的区别[扫盲]以及如何利用AS模式固化程序(转载)     主动配置方式(AS)和被动配置方式(PS)和最常用的(JTAG)配置方式: AS由FPGA器件引导配置操作过程,它控制着 ...

  8. 企业微信的corpsecret在哪里？

      问题: 查看“企业微信”的官方开发文档,在“获取access_token”部分提到,使用GET请求方法,访问 https://qyapi.weixin.qq.com/cgi-bin/gettoke ...

  9. Linux架构之Nginx 七层负载均衡

    第50章 Nginx七层负载均衡 一.Nginx负载均衡基本概述 1)为什么要使用负载均衡 当我们的Web服务器直接面向用户,往往要承载大量并发请求,单台服务器难以负荷.使用多台Web服务器组成集群, ...

  10. CentOS7搭建FastDFS V5.11分布式文件系统及Java整合详细过程

    1.1 FastDFS的应用场景 FastDFS是为互联网应用量身定做的一套分布式文件存储系统,非常适合用来存储用户图片.视频.文档等文件.对于互联网应用,和其他分布式文件系统相比,优势非常明显.其中 ...