keyCode
获取用户按下键盘的哪个按键

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>无标题文档</title>

 <script>

 /*

 onkeydown : 当键盘按键按下的时候触发

 onkeyup : 当键盘按键抬起的时候触发

 event.keyCode : 数字类型 键盘按键的值 键值

     ctrlKey,shiftKey,altKey 布尔值

     当一个事件发生的时候，如果ctrl || shift || alt 是按下的状态，返回true，否则返回false

 */

 document.onkeydown = function(ev) {

     //alert(1);

     var ev = ev || event;

     //alert(ev.keyCode);

 }

 document.onclick = function(ev) {

     var ev = ev || event;

     alert(ev.ctrlKey);

 }

 </script>

 </head>

 <body>

 </body>

 </html>

键盘事件实例：

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>无标题文档</title>

 <script>

 window.onload = function() {

     var oText = document.getElementById('text1');

     var oUl = document.getElementById('ul1');

     oText.onkeyup = function(ev) {

         var ev = ev || event;

         //alert(this.value);

         if ( this.value != '' ) {

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

                 var oLi = document.createElement('li');

                 oLi.innerHTML = this.value;

                 if ( oUl.children[0] ) {

                     oUl.insertBefore( oLi, oUl.children[0] );

                 } else {

                     oUl.appendChild( oLi );

                 }

             }

         }

     }

 }

 </script>

 </head>

 <body>

     <input type="text" id="text1" />

     <ul id="ul1"></ul>

 </body>

 </html>

键盘控制div移动：

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>无标题文档</title>

 <style>

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

 </style>

 <script>

 window.onload = function() {

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

     //不是所有元素都能够接收键盘事件，能够响应用户输入的元素，能够接收焦点的元素就能够接收键盘事件

     //onkeydown : 如果按下不抬起，那么会连续触发

     //定时器

     document.onkeydown = function(ev) {

         var ev = ev || event;

         switch(ev.keyCode) {

             case 37:

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

                 break;

             case 38:

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

                 break;

             case 39:

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

                 break;

             case 40:

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

                 break;

         }

     }

 }

 </script>

 </head>

 <body>

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

 </body>

 </html>

Javascript 事件对象（六）键盘事件的更多相关文章

  1. React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

    1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...

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

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

  3. 常用MouseEvent鼠标事件对象&KeyboardEvent键盘事件对象&常用键盘码

    MouseEvent鼠标事件对象: e.target //=> 事件源(操作的是哪个元素) e.clientX e.clientY //当前鼠标触发点距离当前窗口左上角的X|Y轴坐标 e.pag ...

  4. 简单总结焦点事件、Event事件对象、冒泡事件

    每学习一些新的东西,要学会复习,总结和记录. 今天来简单总结一下学到的几个事件:焦点事件.Event事件对象.冒泡事件 其实这几个事件应该往深的说是挺难的,但今天主要是以一个小菜的角度去尝试理解一些基 ...

  5. javaScript事件（六）事件类型之滚轮事件

    滚轮事件其实就是一个mousewheel事件,这个事件跟踪鼠标滚轮,类似Mac的触屏版. 一.客户区坐标位置 鼠标事件都是在浏览器视口的特定位置上发生的.这个位置信息保存在事件对象的clientX和c ...

  6. JavaScript的事件对象_滚轮事件

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

  7. javascript每日一练（七）——事件二：键盘事件

    一.键盘事件 onkeydown触发, keyCode键盘编码 ctrlKey altKey shiftKey 键盘控制div移动 <!doctype html> <html> ...

  8. vue学习笔记（一）关于事件冒泡和键盘事件 以及与Angular的区别

    一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...

  9. python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  10. 关于事件冒泡和键盘事件 以及与Angular的区别

    一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...

随机推荐

  1. NoSQL生态系统——hash分片和范围分片两种分片

    13.4 横向扩展带来性能提升 很多NoSQL系统都是基于键值模型的,因此其查询条件也基本上是基于键值的查询,基本不会有对整个数据进行查询的时候.由于基本上所有的查询操作都是基本键值形式的,因此分片通 ...

  2. js判断数组

    1.constructor 在W3C定义中的定义:constructor 属性返回对创建此对象的数组函数的引用 就是返回对象相对应的构造函数.从定义上来说跟instanceof不太一致,但效果都是一样 ...

  3. Centos 6.5 安装 ionCube PHP Loader

    使用某些php的程序的时候会出现提示:Site error: the file /***/index.php requires the ionCube PHP Loader ioncube_loade ...

  4. 繁星——JQuery选择器之层级

    [ancestor descendant] 在给定元素下匹配所有后代元素.这个选择器的使用概率相当之高,使用示例如下: //HTML代码: <div id='div01'> <inp ...

  5. AndroidManifest.xml file missing!

    1.点击菜单栏中的Project——>Clean一下. 2.把AndroidManifest.xml文件再保存一下就可以了.

  6. SpringMVC 处理数据模型

    处理模型数据 Spring MVC 提供了以下几种途径输出模型数据: ModelAndView: 处理方法返回值类型为 ModelAndView 时, 方法体即可通过该对象添加模型数据 Map 及 M ...

  7. 计算机网络(8)-----TCP报文段的首部格式

    TCP报文段的首部格式 概述 TCP报文段首部的前20个字节是固定的,因此TCP首部的最小长度是20字节. 源端口和目标端口 各占2个字节,分别写入源端口号和目的端口号. 序列号 占4个字节,表示本报 ...

  8. js动画之获取元素属性

    首先我们要介绍一些知识 offsetWidth element.offsetWidth = width + padding + border; width 我们也知道element.style.wid ...

  9. C++重载流运算符，将存储结构体的vector直接写入文件

    我们知道,当vector很大的时候,如果使用循环的方式将其中的元素写入文件将非常费时,因此有没有办法将vector一次性写入文件呢? 采用流运算符重载的方法可以做到,不仅基本类型的vector可以一次 ...

  10. 黑马程序员——C语言基础 内存剖析

    Java培训.Android培训.iOS培训..Net培训.期待与您交流! (以下内容是对黑马苹果入学视频的个人知识点总结) (一)进制 进制是一种计数的方式,数值的表示形式.有多种进制十进制.二进制 ...