​x
 
<!DOCTYPE html>
<html>
​
<body>
    <input type="text" id="key1" onkeydown="keyDown(event)" />Enter any key
    <input type="text" id="key3" onkeyup="keyUp(event)" onkeypress="keyPress()" />Enter any key
    <p id="para"></p>
    <p id="para1"></p>
    <script>
        function keyDown(event){
            alert("A keydown event occured");
            if(event.altKey){
                document.getElementById("para").innerHTML = "Key pressed is ALT" ;
            }
            else if(event.ctrlKey){
                document.getElementById("para").innerHTML = "Key pressed is CONTROL" ;
            }
            else if(event.metaKey){
                document.getElementById("para").innerHTML = "Key pressed is META" ;
            }
            else if(event.shiftKey){
                document.getElementById("para").innerHTML = "Key pressed is SHIFT" ;
            }
            else{
               document.getElementById("para").innerHTML += " Key pressed is " + event.key + " and it's keycode is " + (event.which || event.keycode);  
            }
            
        }
        function keyUp(event){
            document.getElementById("key3").style.backgroundColor = "yellow";               
        }
        function keyPress(){
            document.getElementById("key3").style.backgroundColor = "red";
            document.getElementById("para1").innerHTML = "Char code is " + event.charCode;              
        }
    </script>
</body>
​
</html>