JavaScript键盘事件全面控制代码
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键盘事件全面控制代码的更多相关文章
- js键盘事件全面控制详解
js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件 ...
- js键盘事件全面控制
js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...
- js键盘事件全面控制详解【转】
js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...
- day48—JavaScript键盘事件
转行学开发,代码100天——2018-05-03 今天继续学习JavaScript事件基础之键盘事件. 键盘代号获取 keyCode 键盘事件:onkeydown onkeyup 如通过键盘上下左右按 ...
- Javascript 键盘事件
window.document.onkeydown = function (e) { var evt = window.event || e;//兼容性处理 var keycode = evt.key ...
- Js键盘事件全面控制,回车按键事件,键盘对应按键码,按键事件兼容各个浏览器。
在网上查询的按键码如下: 一.键盘按键和键盘对应代码表: 字母按键码A <--------> 65 B <--------> 66 C <--------> 6 ...
- javascript 键盘事件总结
原文:http://www.cnblogs.com/rubylouvre/archive/2009/08/20/1550526.html#2583814 在进入正题前,我们看一下浏览器对于键盘的一些默 ...
- c# 使用hook来监控鼠标键盘事件的示例代码
如果这个程序在10几年前,QQ刚刚兴起的时候,有了这个代码,就可实现盗号了. 当然使用钩子我们更多的是实现"全局快捷键"的需求. 比如 程序最小化隐藏后要"某快捷键&qu ...
- js浏览器键盘事件控制(转自新浪微博)
js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...
随机推荐
- 一个读取propeties配置文件的工具类,线程安全的
public class ConfigUtil { private static Map<String,Properties> map = new HashMap<String,Pr ...
- mobile 测试入门思维导图
手机测试思维导图 ISO 测试思维导图 Android测试思维导图 原图出自:http://www.ministryoftesting.com/resources/mindmaps/
- fiddler Composer 构建请求
Fiddler的作者把HTTP Request发射器取名叫Composer(中文意思是:乐曲的创造者),以前叫做Request Builder Fiddler Composer的功能就是用来创建HTT ...
- nfs:server 172.168.1.22 not responding,still trying问题解决方法 平台为RealARM 210平台
nfs:server 172.168.1.22 not responding,still trying问题解决方法 ,平台为RealARM 210平台. 这里的问题是在使用nfs挂载文件系统时遇到的, ...
- buffer busy wait
什么是buffer busy wait? A session that reads or modifies a buffer in the SGA must first acquire the cac ...
- COJ 0560 4015划分数
4015 划分数 难度级别:B: 运行时间限制:1000ms: 运行空间限制:262144KB: 代码长度限制:2000000B 试题描述 有n个无区别的物品,将他们划分成不超过m组,求出划分方法数模 ...
- BZOJ2659: [Beijing wc2012]算不出的算式
2659: [Beijing wc2012]算不出的算式 Time Limit: 3 Sec Memory Limit: 128 MBSubmit: 668 Solved: 366[Submit] ...
- libvirtsAPI
mongodb远程服务器连接 mongo -uroot -p321 master.puppet.org:27017/admin
- 联系我们_站内信息_站内资讯_网上定制衬衫|衬衫定制|衬衫定做-ChenShanLe衬衫乐
联系我们_站内信息_站内资讯_网上定制衬衫|衬衫定制|衬衫定做-ChenShanLe衬衫乐 衬衫乐定制网是国内领先的成衣定制机构,专业从事衬衫网络在线定制.高级定制服装的价格不菲,而衬衫乐运用了&qu ...
- 修改oracle服务器所在linux主机名
1.修改/etc/hosts 2.修改 /etc/sysconfig/network 3.修改oracle的 listener.ora 4.修改 tnsnames.ora