一、键盘事件

　　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. SQL Server(SSIS package) call .net DLL

    There are two method to call .net DLL in SQLSERVER. The first one is to use the sql clr but it has a ...

  2. Angular JS 学习笔记（一）

    1. 菜鸟教程:http://www.runoob.com/angularjs/angularjs-tutorial.html 2. Angular JS中文网:http://www.apjs.net ...

  3. 【ActiveMQ】设置自动重连

    <property name="brokerURL" value="tcp://localhost:61616"/> <property na ...

  4. C语言选择法排序

    #include <stdio.h> int main() { int i, j, p, n, q; ] = {, , , , }; //对无序数组进行排序 ; i<; i++) { ...

  5. QMessageBox 用法

    案例一:QMessageBox msgBox;msgBox.setText("The document has been modified.");msgBox.setInforma ...

  6. 一个ShellExecute的超全说明（www.phidels.com这个网站很多内容）

    I. Introduction / Déclaration ShellExecute fait partie des innombrables fonctions de l'API Windows ; ...

  7. BZOJ 1631: [Usaco2007 Feb]Cow Party

    题目 1631: [Usaco2007 Feb]Cow Party Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 491  Solved: 362[Sub ...

  8. poj 1579 Function Run Fun(记忆化搜索+dp)

    题目链接:http://poj.org/problem?id=1579 思路分析:题目给出递归公式,使用动态规划的记忆搜索即可解决. 代码如下: #include <stdio.h> #i ...

  9. PHP 自学之路-----XML编程（Xpath技术,simpleXml技术）基础入门

    XPAth技术 XPath的设计的核心思想,可以通过xpath迅速简介的定位到你希望查找的节点.主要目的是描述节点相对其他节点的位置,可以取得所有符合条件的节点,成为[位置路径]. Xapth主要用来 ...

  10. FileUtil

    package com.wiseweb.util; import java.io.BufferedReader; import java.io.File; import java.io.FileInp ...