Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Apr 2005
    Posts
    213
    Thanks
    2
    Thanked 1 Time in 1 Post

    KeyCodes & Events

    This simple program displays the Keycode & event type for a key pressed. Good for a quick reference.

    Code:
    <html>
    <head>
    <title>Keyboard Events and Codes</title>
    <style type="text/css">
    body {font-family:Arial, sans-serif}
    h1 {text-align:right}
    td {text-align:center}
    </style>
    <script language="JavaScript" type="text/javascript">
    // array of table cell ids
    var tCells = ["downKey", "pressKey", "upKey", "downChar", "pressChar", 
    "upChar", "keyTarget", "character"];
      
    // clear table cells for each key down event
    function clearCells() {
        for (var i = 0; i < tCells.length; i++) {
            document.getElementById(tCells[i]).innerHTML = "&mdash;";
        }
    }
      
    // display target node's node name
    function showTarget(evt) {
        var node = (evt.target) ? evt.target : ((evt.srcElement) ? 
                   evt.srcElement : null);
        if (node) {
            document.getElementById("keyTarget").innerHTML = node.nodeName;
        }
    }
      
    // decipher key down codes
    function showDown(evt) {
        clearCells();
        evt = (evt) ? evt : ((event) ? event : null);
        if (evt) {
            document.getElementById("downKey").innerHTML = evt.keyCode;
            if (evt.charCode) {
                document.getElementById("downChar").innerHTML = evt.charCode;
            }
            showTarget(evt);
        }
    }
      
    // decipher key press codes
    function showPress(evt) {
        evt = (evt) ? evt : ((event) ? event : null);
        if (evt) {
            document.getElementById("pressKey").innerHTML = evt.keyCode;
            if (evt.charCode) {
                document.getElementById("pressChar").innerHTML = evt.charCode;
            }
            showTarget(evt);
            var charCode = (evt.charCode) ? evt.charCode : evt.keyCode;
            // use String method to convert back to character
            document.getElementById("character").innerHTML = 
                String.fromCharCode(charCode);
        }
    }
      
    // decipher key up codes
    function showUp(evt) {
        evt = (evt) ? evt : ((event) ? event : null);
        if (evt) {
            document.getElementById("upKey").innerHTML = evt.keyCode;
            if (evt.charCode) {
                document.getElementById("upChar").innerHTML = evt.charCode;
            }
            showTarget(evt);
        }
    }
      
    // set page-wide event listeners
    document.onkeydown = showDown;
    document.onkeypress = showPress;
    document.onkeyup = showUp;
    </script>
    </head>
    <body>
    <h1>Key and Character Codes vs. Event Types</h1> 
    <hr>
    <p>Enter some text with uppercase and lowercase letters:<br>
    <form>
    <input type="text" id="entry" size="60" 
           onkeydown="showDown(event)" 
           onkeypress="showPress(event)" 
           onkeyup="showUp(event)">
    </textarea></p>
    </form>
    <table border="2" cellpadding="5" cellspacing="5">
    <caption>Keyboard Event Properties</caption>
    <tr><th>Data</th><th>keydown</th><th>keypress</th><th>keyup</th></tr>
    <tr><td>keyCode</td>
        <td id="downKey">&mdash;</td>
        <td id="pressKey">&mdash;</td>
        <td id="upKey">&mdash;</td>
    </tr>
    <tr><td>charCode</td>
        <td id="downChar">&mdash;</td>
        <td id="pressChar">&mdash;</td>
        <td id="upChar">&mdash;</td>
    </tr>
    <tr><td>Target</td>
        <td id="keyTarget" colspan="3">&mdash;</td>
    </tr>
    <tr><td>Character</td>
        <td id="character" colspan="3">&mdash;</td>
    </tr>
    </table>
    </body>
    </html>

  2. #2
    Registered User
    Join Date
    Oct 2004
    Posts
    592
    Thanks
    0
    Thanked 1 Time in 1 Post
    Thanks.
    Last edited by iota; 10-16-2005 at 02:00 PM.

  3. #3
    Regular Coder
    Join Date
    Apr 2005
    Posts
    213
    Thanks
    2
    Thanked 1 Time in 1 Post
    no problem. It helps me alot especially when I design .hta's that use the function keys.


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •