javascript键盘事件全面控制脚本代码

TD {text-align:center}

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"
}

Keyboard Event Handler Lab





























onKeyDownonKeyPressonKeyUp
Key Codes 0 0 0
Char Codes (IE5/Mac; NN6) 0 0 0
Modifier Keys Shift Shift Shift
Ctrl Ctrl Ctrl
Alt Alt Alt

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • js中键盘事件实例简析

    本文实例分析了js中键盘事件.分享给大家供大家参考.具体分析如下: 该实例效果: 按键盘上的任意一个键,弹出相应的ASCII码,兼容ie,chrome和firefox. 但还是有不少问题: (1)ie和chrome中,一些键没有效果,如上.下.左.右等: (2)而firefox中的向右键,与单引号键,都为39. 具体代码如下: 复制代码 代码如下: <html> <head> <script type="text/javascript">  wind

  • js捕捉键盘事件和按键键值的方法

    如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co

  • 浅谈js键盘事件全面控制

    主要分四个部分 第一部分:浏览器的按键事件 第二部分:兼容浏览器 第三部分:代码实现和优化 第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown. onkeypress和onkeyup这三个事件句柄.一个典型的按键会产生所有这三种事件,依次是keydown,keypress,然后是按键释放时候的keyup. 在这3种事件类型中,keydown和keyup比较底层,而keypr

  • javascript键盘事件全面控制脚本代码

    TD {text-align:center} function init() { document.onkeydown = showKeyDown document.onkeyup = showKeyUp document.onkeypress = showKeyPress } function showKeyDown(evt) { evt = (evt) ? evt : window.event document.getElementById("pressKeyCode").inne

  • JavaScript键盘事件常见用法实例分析

    JavaScript键盘事件常见用法实例分析

    本文实例讲述了JavaScript键盘事件常见用法.分享给大家供大家参考,具体如下: JavaScript 键盘事件有以下3种 keydown 键盘按键按下(如果按着不放,会持续触发该事件),可以捕获组合键. keypress 键盘非功能按键按下(在keydown之后触发,如果按着不放会持续触发该事件),只能捕获单个键. keyup 键盘按键弹起,可以捕获组合键. 全局事件对象event event.ctrlKey 功能键"ctrl"键是否按下. event.altKey 功能键&qu

  • JavaScript 键盘事件的处理及属性详解

    目录 引言 处理键盘事件 键盘事件属性 引言 JavaScript 中的事件,当用户或浏览器尝试操作页面时,就会发生事件来处理 JavaScript 与HTML的交互.正如大家所知,JavaScript 与HTML一起工作,因此,页面加载.单击按钮.最小化窗口.单击鼠标.敲打键盘等发生的一切都是事件.就像在单击按钮时向用户显示任何消息一样,这是通过事件发生的. 所有HTML元素(如按钮.文本框.图像)都可以包含可以使用 JavaScript 代码触发的事件.所有这些事件都是DOM的一部分(文档对

  • javascript 键盘事件总结 推荐

    在form中, submit的快捷键是 enter,reset的快捷键是 esc.不过在IE6,safari4,ff3.5,opera10,chrome中,按Enter,不但激发form的submit事件,同时也会激发提交按钮的onclick,激发顺序为提交按钮的 onclick → form 的 onsubmit. 键盘事件 键盘事件 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 不过并不止提交按钮会激发form的submit事件,连同上面的归纳如下: 1. 如果表单里有一个ty

  • JavaScript键盘事件响应顺序详解

    JavaScript键盘事件响应顺序详解

    键盘响应顺序 当按下键盘时,会触发多个事件,它们将按顺序发生. 对于字符键来说,键盘事件的影响顺序如下: 1.keydown 2.keypress 3.keyup 对于非字符键(如功能键或特殊键)来说,键盘事件的响应顺序如下: 1.keydown 2.keyup 如果按下字符键不放,则keydown和keypress事件将逐个发生,直至松开按键. 如果按下非字符键不放,则只有keydown事件持续发生,直至松开按键. 示例:获取键盘事件响应顺序: <!DOCTYPE html> <htm

  • Javascript 键盘事件的组合使用实现代码

    复制代码 代码如下: txt1.onkeydown = function(ev){ var oevent = ev||event; if(oevent.ctrlKey && oevent.keyCode == 13){ -- } } txt1:绑定事件的对象,例如:一个文本输入框input. oevent:事件对象(包含事件的很多有用详情). keyCode:可以获取到键盘按下的键值.例如:回车键就是13. ctrlKey:是一个布尔值,表示键盘上面的ctrl键是否为按下状态.(当然还有:

  • Javascript动态绑定事件的简单实现代码

    下面是页面的dom结构 复制代码 代码如下: <ul id="test"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> </ul> 下面是javascript代码 复制代码 代码如下: //根据ID获取对象 function id(v) { return document.getElementById(

  • jquery快捷动态绑定键盘事件的操作函数代码

    复制代码 代码如下: (function($) { $.extend({ key_fn:[], //存放绑定的字符对应的函数 key_code:[], //存放字符 key_bind:function(ch,callback){ var KeyCode = {a:65,b:66,c:67,d:68,e:69,f:70,g:71,h:72,i:73,j:74,k:75,l:76,m:77,n:78,o:79,p:80,q:81,r:82,s:83,t:84,u:85,v:86,w:87,x:88,

  • javascript一些不错的函数脚本代码

    计算字符长度的js函数 复制代码 代码如下: function LEN(str){ var i,sum=0; for(i=0;i<str.length;i++){ if((str.charCodeAt(i)>=0) && (str.charCodeAt(i)<=255)) sum=sum+1; else sum=sum+2; } return sum; } 去字符中前后的空格的js函数 复制代码 代码如下: function TRIM(value){return valu

随机推荐