zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    如何高效处理bug?
    如何获取字符串函数的实现?
    数据处理-csv,pandas
    CentOS 下安装SAC(Seismic Analysis Code)
    CentOS安装使用ffmpeg
    Tensorflow问题记录 --pydot Failed to import pydot. You must install pydot and graphviz for pydotprint to work
    Tensorflow学习记录 --TensorFlow高效读取数据tfrecord
    Committee to boost development of Chinese language teachers
    Consensus-based decentralized auctions for robust task allocation
    Chinese market critical to US firms: US-China Business Council
  • 原文地址:https://www.cnblogs.com/phpfensi/p/3898973.html
Copyright © 2011-2022 走看看