首页 > 代码库 > JavaScript键盘事件全面控制代码

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>