教程集 > 脚本编程 > javascript > 正文键盘事件全面控制

键盘事件全面控制

发布时间：2023-04-29 编辑：jiaochengji.com

教程集为您提供键盘事件全面控制等资源，欢迎您收藏本站，我们将为您提供最新的键盘事件全面控制资源

提示：您可以先修改部分代码再运行

<html>  <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <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>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
jquery键盘事件使用介绍
 Js鼠标事件大全(最新,最全的版本)
jQuery回车键事件实例代码
 javascript键盘控制事件实例详解
 jquery键盘事件介绍
 JavaScript键盘事件深入解析
 笔记本键盘字母变数字怎么办笔记本键盘字母变数字原因分析
 jQuery滑动插件 Moving Boxes
U盘怎么防病毒?U盘防病毒的方法大全
 jquery回车事件的示例代码

上一篇：站内搜索脚本(一) 下一篇：表格里的斜线，类似课程表的斜线

[关闭]

键盘事件全面控制

最近更新

浏览排行