转行学开发，代码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. O-超大型LED显示屏

    Input 输入包含不超过100组数据.每组数据第一行为”START hh:mm:ss”,表示比赛开始时刻为hh:mm:ss.最后一行为”END hh:mm:ss”,即比赛结束时刻.二者之间至少会有一 ...

  2. nginx启动报错

    nginx启动的时候报错 nginx: [emerg] invalid number of arguments in "root" directive in /etc/nginx/ ...

  3. thinkphp5发送邮件(实例代码 非常适合新手)

    第一步:在(https://pan.baidu.com/s/1Fq6lONHlft5D6jvOnNwtoA)下载 phpmailer.rar 解压 然后把文件放入 vendor目录下 第二步:在 ap ...

  4. STL容器概述

    STL容器 1.容器概述 1.1.容器分类 1.1.1.顺序容器:提供对元素序列的访问,顺序容器为元素连续分配内存或将元素组织为链表,元素的类型是容器成员value_type. 顺序容器 说明 vec ...

  5. k3 cloud的单据存储在业务对象表中

    k3 cloud的单据存储在业务对象表中,表名为T_META_OBJECTTYPE,查询表名和对应的表: select FNAME,FBASEOBJECTID from T_META_OBJECTTY ...

  6. intellij idea 的快捷键方法

    1.Ctrl+N按名字搜索类 相当于eclipse的ctrl+shift+R,输入类名可以定位到这个类文件,就像idea在其它的搜索部分的表现一样,搜索类名也能对你所要搜索的内容多个部分进行匹配,而且 ...

  7. django基础篇02-url路由系统

    django的路由系统: 一.基本用法: 1.path('index', views.index), # 通过类的方式创建url映射 2.path('home', views.Home.as_view ...

  8. Flask【第7篇】：Flask中的wtforms使用

    flask中的wtforms使用 一.简单介绍flask中的wtforms WTForms是一个支持多个web框架的form组件,主要用于对用户请求数据进行验证. 安装: pip3 install w ...

  9. POJ-3436-ACM Computer Factory(最大流, 输出路径)

    链接: https://vjudge.net/problem/POJ-3436#author=0 题意: 为了追求ACM比赛的公平性,所有用作ACM比赛的电脑性能是一样的,而ACM董事会专门有一条生产 ...

  10. 【leetcode】1110. Delete Nodes And Return Forest

    题目如下: Given the root of a binary tree, each node in the tree has a distinct value. After deleting al ...