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>
php资料