keydown and keypress event

by Darker

HTML

<input id="inp">
<input id="out">
    <h2>keydown</h2>
    <table id="keydown">

    </table>
    <h2>keypress</h2>
    <table id="keypress">

    </table>

CSS

td:first-child {
    font-family: monospace;
}

JavaScript

function keyDown(e) {
      var evtobj = window.event? event : e
      if (evtobj.which === 90 && evtobj.ctrlKey) {
          // do something with this knowledge!
          console.log('Ctrl+Z from keydown');
      }
      if (evtobj.which === 27) {
        // YourFunc(evtobj.which); // your function should know what 27 means already
        console.log('Escape from keydown');
      }
    
    // We are not going to do anything if 
    //   one of our conditions isn't met :)
    printCodes(e, "keydown");
    return; // or whatever
}

function keyPress(e) {
    var evtobj = window.event? event : e;
    if (evtobj.charCode) { // it's a real character
        document.getElementById('out').value += String.fromCharCode(evtobj.charCode);
        console.log(String.fromCharCode(evtobj.charCode) + ' from ' + evtobj.type);
        // YourFunc(evt.charCode);
    }
    
    printCodes(e,"keypress");
    return; // or whatever
}
function printCodes(e, table) {

    var props = ["which", "keyCode", "charCode", "keyIdentifier", "code", "key"];
    var table = document.getElementById(table);
    table.innerHTML = "";
    for(var i=0,l=props.length; i<l;i++) {
        var tr = document.createElement("tr");
        var el = document.createElement("td");
        el.innerHTML = props[i];
        tr.appendChild(el);
        var el = document.createElement("td");
        if(el) {
            if(typeof e[props[i]]!= "undefined") {
               el.innerHTML = e[props[i]];
            }
            else {
                el.innerHTML = "undefined";
            }
        }
        tr.appendChild(el);
        table.appendChild(tr);
    }
}

inp = document.getElementById('inp');
inp.onkeydown = keyDown;
inp.onkeypress = keyPress;