一、键盘事件

　　onkeydown触发，　　keyCode键盘编码　　ctrlKey　　altKey　　shiftKey

键盘控制div移动

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute;}
</style>
<script>
document.onkeydown = function(ev){
    var oEvent = ev || event;
    var oDiv = document.getElementById('div1');

    switch(oEvent.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>

ctrl+enter提交留言

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload = function(){
    var oTxt1 = document.getElementById('txt1');
    var oTxt2 = document.getElementById('txt2');
    var oBtn = document.getElementById('btn1');    

    oBtn.onclick = function(){
        oTxt1.innerHTML += oTxt2.value+'\n';
        oTxt2.value = '';
    };

    document.onkeydown = function(ev){
        var oEvent = ev || event;
        //alert(oEvent.keyCode);
        if(oEvent.ctrlKey && oEvent.keyCode == 13 ){
            oBtn.click();
        }
    };
};
</script>
</head>

<body>
<textarea id="txt1" rows="10" cols="40"></textarea><br />
<input type="text" id="txt2" /><input type="button" id="btn1" value="提交"/>(ctrl+enter)
</body>
</html>

javascript每日一练（七）——事件二：键盘事件的更多相关文章

  1. javascript每日一练（十二）——运动框架

    运动框架 可以实现多物体任意值运动 例子: <!doctype html> <html> <head> <meta charset="utf-8&q ...

  2. 前端（十五）—— JavaScript事件：绑定事件方式、事件的冒泡和默认事件、鼠标事件、键盘事件、表单 事件、文档事件、图片事件、页面事件

    JS事件:绑定事件方式.事件的冒泡和默认事件.鼠标事件.键盘事件.表单 事件.文档事件.图片事件.页面事件 一.事件的两种绑定方式 1.on事件绑定方式 document.onclick = func ...

  3. jacascript 鼠标事件和键盘事件

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 鼠标事件 鼠标事件共10类,包括click.contextmenu(右键).dblclick(双击).mo ...

  4. Python_Selenium之basepage 识别元素、浏览器操作、获取属性、鼠标事件、键盘事件、弹窗、切换frame、切换句柄等封装

    #coding=gbkimport osimport timefrom selenium import webdriverfrom selenium.webdriver.common.by impor ...

  5. 基于OpenGL编写一个简易的2D渲染框架-07 鼠标事件和键盘事件

    这次为程序添加鼠标事件和键盘事件 当检测到鼠标事件和键盘事件的信息时,捕获其信息并将信息传送到需要信息的对象处理.为此,需要一个可以分派信息的对象,这个对象能够正确的把信息交到正确的对象. 实现思路: ...

  6. javascript每日一练（一）——javascript基础

    一.javascript的组成 ECMAScript DOM BOM 二.变量类型 常见类型有:number, string, boolean, undefined, object, function ...

  7. JavaScript(js)处理的HTML事件、键盘事件、鼠标事件

    示例代码: HTML文件: <!DOCTYPE html><html lang="en"><head> <meta charset=&qu ...

  8. javascript（九）事件冒泡 onmouseenter onmouseenter 默认事件 和 键盘事件

    1 事件冒泡 子元素触发的事件,会往上(父元素)传递: 例子: <div id="box"> <p></p> </div> < ...

  9. jQuery-3.事件篇---键盘事件

    jQuery键盘事件之keydown()与keyup()事件 鼠标有mousedown,mouseup之类的事件,这是根据人的手势动作分解的2个触发行为.相对应的键盘也有这类事件,将用户行为分解成2个 ...

随机推荐

  1. Hibernate_13_QBC查询

    Employee类.Department类.SessionFactoryTools类.Employee.hbm.xml文件.Department.hbm.xml文件.Hibernate.cfg.xml ...

  2. 工具篇-TraceView

    --- layout: post title: 工具篇-TraceView  description: 让我们远离卡顿和黑屏 2015-10-09 category: blog --- ## 让我们远 ...

  3. java.util.concurrent BlockingQueue

    BlockingQueue 它实现了Queue接口.它是A BlockingQueue with one thread putting into it, and another thread taki ...

  4. windows apache 配置多个服务 站点 Apache Service Monitor

    把Apache安装为多个Window NT服务 ~~~ 可以在 services.msc中查看到1. 在DOS下跳到Apache安装目录里的bin目录(~~~或者用path命令 把apache的安装目 ...

  5. [置顶] JAVA概述（6）常量,关键字,进制转换

    21.关键字.... 变量: 就是将不确定的数据进行存储.也就是需要在内粗恩中开辟一个空间. 整数类型   1个字节 byte                    占 8位 -128~~~127 2 ...

  6. getParameter

    近期学习JAVA的WEB开发,遇到Request中相关的getParameter方法问题.在网上找了一下.自己整理,以备以后查用. getParameter得到的都是String类型的.或者是用于读取 ...

  7. MiddleGenIDE工具的使用

    1. MiddleGenIDE工具            1) 先在网上下载MiddleGenIDE工具.能够參考这里 http://blog.csdn.net/wangcunhuazi/articl ...

  8. leetcode第一刷_Set Matrix Zeroes

    这个题乍一看非常easy,实际上还挺有技巧的.我最開始的想法是找一个特殊值标记.遇到一个0,把他所相应的行列中非零的元素标记成这个特殊值.0值保持不变,然后再从头遍历一次,碰到特殊值就转化成0. 问题 ...

  9. Linq实现t-Sql的各种连接

    在ORM框架大行其道的今天,对于.net行业的人,想要学好EF,那Linq的学习在势在必行啊.今天总结下平时比较常用的表连接的用法. Inner Join Linq: var list = (from ...

  10. 在vmware里面免费安装纯净的xp虚拟机

    1. 安装vmware, 略 2. 下载xp http://msdn.itellyou.cn/ 用迅雷下载Windows XP Professional with Service Pack 3 (x8 ...