Detecting which keyboard event and property occured

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

Detecting which keyboard event and property occured

Comments

About

Contact

Get Connected