JavaScript键盘事件全面控制代码

时间：2021-09-28 08:13:17

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>

相关文章