zoukankan      html  css  js  c++  java
  • 键盘事件-键代码编号

    <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>
    

      

    人如代码,规矩灵活;代码如诗,字句精伦。
  • 相关阅读:
    ExtJS小技巧
    Oracle 表的行数、表占用空间大小,列的非空行数、列占用空间大小 查询
    NPM 私服
    IDEA 不编译java以外的文件
    SQL 引号中的问号在PrepareStatement 中不被看作是占位符
    Chrome 浏览器自动填表呈现淡黄色解决
    批量删除Maven 仓库未下载成功.lastupdate 的文件
    Oracle 11g 监听很慢,由于监听日志文件太大引起的问题(Windows 下)
    Hibernate 自动更新表出错 建表或添加列,提示标识符无效
    Hibernate 自动更新表出错 More than one table found in namespace
  • 原文地址:https://www.cnblogs.com/xinlinux/p/3915388.html
Copyright © 2011-2022 走看看