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

更新时间：2008年06月08日 19:44:01 作者：

可以根据按的键盘上的键，显示键盘动作，并显示keyCode值等

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

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

js的indexOf方法使用
indexOf() 方法可返回数组中某个指定的元素位置，本文就来介绍一下js的indexOf方法使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2023-05-05
JavaScript动画函数封装详解
动画的原理是通过定时器setInterval() 不断移动盒子位置。但是如果同时有好几个元素都需要添加动画呢？我们就可以考虑将其封装成一个简单的动画函数。本文将为大家介绍如何进行封装，需要的可以参考一下
2021-12-12
JS中call()和apply()的功能及用法实例分析
这篇文章主要介绍了JS中call()和apply()的功能及用法,结合实例形式详细分析了JS中call()和apply()的功能、区别、使用方法及相关操作注意事项,需要的朋友可以参考下
2019-06-06
非常全面的12种js数组去重的方法
数组的去重方法,其实无论实在实际项目还是在面试中都会有用到的,下面这篇文章主要给大家介绍了非常全面的12种js数组去重的方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-07-07
Javascript实时柱状图实现代码
js实现的实时柱状图,非常有创意的想法。
2008-10-10
js实现课堂随机点名系统
这篇文章主要介绍了js实现课堂随机点名系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-11-11
带你彻底搞懂JavaScript的事件流
这篇文章主要为大家详细介绍了JavaScript的事件流，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-03-03
微信小程序request请求封装，验签代码实例
这篇文章主要介绍了微信小程序request请求封装，验签代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-12-12
JS实现来回出现文字的状态栏特效代码
这篇文章主要介绍了JS实现来回出现文字的状态栏特效代码,针对文字的定义及状态栏的定时显示等实现方法备有详细的文字说明,需要的朋友可以参考下
2015-10-10
十个利用JavaScript实现的爱心动画特效
情人节将至，程序员证明自己不是直男的时候到啦！小编为大家准备了十个通过JavaScript实现的爱心动画特效，快学起来，到时候给女朋友一个惊喜吧
2022-02-02

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具