JavaScript键盘事件全面控制，它可以捕获键盘事件的输入状态，可以判断你敲打了键盘的那个键，ctrl、shift，26个字母等等，返回具体键盘值。

<html>

<head>

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

<title>键盘事件全面控制</title>

<style type="text/css">

td {text-align:center}

</style>

<script language="javascript">

function init() {

    document.onkeydown = showKeyDown

    document.onkeyup = showKeyUp

    document.onkeypress = showKeyPress

}

function showKeyDown(evt) {

    evt = (evt) ? evt : window.event

    document.getElementById("pressKeyCode").innerHTML = 0

    document.getElementById("upKeyCode").innerHTML = 0

    document.getElementById("pressCharCode").innerHTML = 0

    document.getElementById("upCharCode").innerHTML = 0

    restoreModifiers("")

    restoreModifiers("Down")

    restoreModifiers("Up")

    document.getElementById("downKeyCode").innerHTML = evt.keyCode

    if (evt.charCode) {

        document.getElementById("downCharCode").innerHTML = evt.charCode

    }

    showModifiers("Down", evt)

}

function showKeyUp(evt) {

    evt = (evt) ? evt : window.event

    document.getElementById("upKeyCode").innerHTML = evt.keyCode

    if (evt.charCode) {

        document.getElementById("upCharCode").innerHTML = evt.charCode

    }

    showModifiers("Up", evt)

    return false

}

function showKeyPress(evt) {

    evt = (evt) ? evt : window.event

    document.getElementById("pressKeyCode").innerHTML = evt.keyCode

    if (evt.charCode) {

        document.getElementById("pressCharCode").innerHTML = evt.charCode

    }

    showModifiers("", evt)

    return false

}

function showModifiers(ext, evt) {

    restoreModifiers(ext)

    if (evt.shiftKey) {

        document.getElementById("shift" + ext).style.backgroundColor = "#ff0000"

    }

    if (evt.ctrlKey) {

        document.getElementById("ctrl" + ext).style.backgroundColor = "#00ff00"

    }

    if (evt.altKey) {

        document.getElementById("alt" + ext).style.backgroundColor = "#0000ff"

    }

}

function restoreModifiers(ext) {

    document.getElementById("shift" + ext).style.backgroundColor = "#ffffff"

    document.getElementById("ctrl" + ext).style.backgroundColor = "#ffffff"

    document.getElementById("alt" + ext).style.backgroundColor = "#ffffff"

}

</script>

</head>

<body onLoad="init()">

    <h1>Keyboard Event Handler Lab</h1>

    <hr>

    <form>

    <table border=2 cellpadding=2>

    <tr><th></th><th>onKeyDown</th><th>onKeyPress</th><th>onKeyUp</th></tr>

    <tr><th>Key Codes</th>

    <td ID="downKeyCode">0</td>

    <td ID="pressKeyCode">0</td>

    <td ID="upKeyCode">0</td>

    </tr>

    <tr><th>Char Codes (IE5/Mac; NN6)</th>

    <td ID="downCharCode">0</td>

    <td ID="pressCharCode">0</td>

    <td ID="upCharCode">0</td>

    </tr>

    <tr><th rowspan=3>Modifier Keys</th>

    <td><span ID="shiftDown">Shift</span></td>

    <td><span ID="shift">Shift</span></td>

    <td><span ID="shiftUp">Shift</span></td>

    </tr>

    <tr>

    <td><span ID="ctrlDown">Ctrl</span></td>

    <td><span ID="ctrl">Ctrl</span></td>

    <td><span ID="ctrlUp">Ctrl</span></td>

    </tr>

    <tr>

    <td><span ID="altDown">Alt</span></td>

    <td><span ID="alt">Alt</span></td>

    <td><span ID="altUp">Alt</span></td>

    </tr>

    </table>

    </form>

    </body>

</html>

JavaScript键盘事件全面控制代码的更多相关文章

  1. js键盘事件全面控制详解

      js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件 ...

  2. js键盘事件全面控制

    js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...

  3. js键盘事件全面控制详解【转】

    js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...

  4. day48—JavaScript键盘事件

    转行学开发,代码100天——2018-05-03 今天继续学习JavaScript事件基础之键盘事件. 键盘代号获取 keyCode 键盘事件:onkeydown onkeyup 如通过键盘上下左右按 ...

  5. Javascript 键盘事件

    window.document.onkeydown = function (e) { var evt = window.event || e;//兼容性处理 var keycode = evt.key ...

  6. Js键盘事件全面控制，回车按键事件，键盘对应按键码，按键事件兼容各个浏览器。

    在网上查询的按键码如下: 一.键盘按键和键盘对应代码表:   字母按键码A <--------> 65 B <--------> 66 C <--------> 6 ...

  7. javascript 键盘事件总结

    原文:http://www.cnblogs.com/rubylouvre/archive/2009/08/20/1550526.html#2583814 在进入正题前,我们看一下浏览器对于键盘的一些默 ...

  8. c# 使用hook来监控鼠标键盘事件的示例代码

    如果这个程序在10几年前,QQ刚刚兴起的时候,有了这个代码,就可实现盗号了. 当然使用钩子我们更多的是实现"全局快捷键"的需求. 比如 程序最小化隐藏后要"某快捷键&qu ...

  9. js浏览器键盘事件控制(转自新浪微博)

    js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...

随机推荐

  1. DOM 之通俗易懂讲解

    DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...

  2. 使用__autoload()来管理文件导入

    其基本思想是把要使用到的其他资源文件统一使用__autoload()方法来管理,我们在使用的时候只需要引入包含__autoload()方法的文件即可.其对性能的影响是微乎其微的,但是带来的好处是巨大的 ...

  3. 开发自定义View

    当开发者打算派生自己的UI组件时,首先定义一个继承View基类的子类,然后重写View类的一个或多个方法,通常可以被用户重写的方法如下:构造器:重写构造器是定制View的最基本方法,当Java代码创建 ...

  4. 2个Web上传组件

    http://www.uploadify.com/download/ http://gmupload.tanjun.com.cn/

  5. QComboBox调用clear函数崩溃的问题

    项目有个需求是这样的: QComboBox需要动态清楚添加Item列表,并且之前设置了QComboBox当前index改变的信号,一旦这个clear调用,当前index就改变,因为一旦改变,信号就发出 ...

  6. 【转】DELL戴尔N4050笔记本拆机（图文）

    原文网址:http://www.ywxydn.com/1047.html

  7. bzoj3995[SDOI2015]道路修建

    http://www.lydsy.com/JudgeOnline/problem.php?id=3995 线段树维护连通性. 我们发现,对于一个区间[L,R],我们只需要知道(1,L),(2,L),( ...

  8. ortp使用详解2

    五:数据的接收和发送 1. 发送过程: 应用发送数据时调用接口 rtp_session_send_with_ts 完成.参数为会话句柄,数据缓冲区地址,数据长度以及应用当前的时间戳.在该接口中,会先调 ...

  9. 《深度解析SDN》学习小结

    SDN(软件定义网络),顾名思义,通过软件来控制或驱动整个网络.SDN的核心概念有两个,第一是转发面与控制面的分离:第二是开放的可编程接口.另外,SDN强调集中式控制,通过软件来控制整个网络,但这并不 ...

  10. 为什么 HTTP 有时候比 HTTPS 好？

    做为一家安全公司,我们在站点Stormpath上经常被开发者问到的是有关安全方面最优做法的问题.其中一个被经常问到的问题是: 我是否应当在站点上运行HTTPS? 很不幸,查遍整个因特网,你大多数情况下 ...