Press a Key, Too!

Jamie Johnson

May 2, 2018

So, you must have read my article about detecting what key is pressed and you wanted to do more since not all keys were detected there. Here's a more thorough version that detects almost all keys. Press a key and see what happens below:

🛠

Use of Character code:

Use of Key code:

And how is it detected? Here's the script:

<script> 

document.onkeypress=function(e){ 

	whatkey = String.fromCharCode(e.which); 

	if(e.which==32){whatkey='space';} 

	if(e.which==13){whatkey='Enter';} 

	if(whatkey!=''){ 

    document.getElementById('keyoutput').innerHTML=('You pressed key with Character Code '+e.which+', which is the '+whatkey+' key.'); // shows which key it is; e.g., 13 is Enter and 96 is `

	} 

} 

function hideoutput(){ 

	document.getElementById('keyoutput').innerHTML='&nbsp;'; 

} 

document.onkeydown = checkKey; 

var keyprocessed = false;  

function checkKey(e){ 

	e = e || window.event;  

	whatkey = String.fromCharCode(e.keyCode); 

	if(e.keyCode==32){whatkey='space';} 

	if(e.keyCode==13){whatkey='Enter';} 

	if(e.keyCode==16){whatkey='Shift';hideoutput();} 

	if(e.keyCode==17){whatkey='Ctrl';hideoutput();} 

	if(e.keyCode==27){whatkey='Esc';hideoutput();} 

	if(e.keyCode==38){whatkey='&uarr;';hideoutput();} 

	if(e.keyCode==39){whatkey='&rarr;';hideoutput();} 

	if(e.keyCode==40){whatkey='&darr;';hideoutput();} 

	if(e.keyCode==37){whatkey='&larr;';hideoutput();} 

	if(e.keyCode==91){whatkey='command';hideoutput();} 

	if(e.keyCode==18){whatkey='Alt';hideoutput();} 

	if(e.keyCode==112){whatkey='F1';hideoutput();} 

	if(e.keyCode==113){whatkey='F2';hideoutput();} 

	if(e.keyCode==114){whatkey='F3';hideoutput();} 

	if(e.keyCode==115){whatkey='F4';hideoutput();} 

	if(e.keyCode==116){whatkey='F5';hideoutput();} 

	if(e.keyCode==117){whatkey='F6';hideoutput();} 

	if(e.keyCode==118){whatkey='F7';hideoutput();} 

	if(e.keyCode==119){whatkey='F8';hideoutput();} 

	if(e.keyCode==120){whatkey='F9';hideoutput();} 

	if(e.keyCode==121){whatkey='F10';hideoutput();} 

	if(e.keyCode==145){whatkey='Scroll Lock';hideoutput();} 

	if(e.keyCode==192){whatkey='`';} 

	if(e.keyCode==189){whatkey='-';} 

	if(e.keyCode==187){whatkey='=';} 

	if(e.keyCode==8){whatkey='Backspace';hideoutput();} 

	if(e.keyCode==45){whatkey='Insert';hideoutput();} 

	if(e.keyCode==36){whatkey='Home';hideoutput();} 

	if(e.keyCode==33){whatkey='Page Up';hideoutput();} 

	if(e.keyCode==34){whatkey='Page Down';hideoutput();} 

	if(e.keyCode==35){whatkey='End';hideoutput();} 

	if(e.keyCode==46){whatkey='Delete';hideoutput();} 

	if(e.keyCode==19){whatkey='Pause/Break';hideoutput();} 

	if(e.keyCode==144){whatkey='Num Lock';hideoutput();} 

	if(e.keyCode==111){whatkey='Num Pad /';} 

	if(e.keyCode==191){whatkey='/';} 

	if(e.keyCode==106){whatkey='Num Pad *';} 

	if(e.keyCode==109){whatkey='Num Pad -';} 

	if(e.keyCode==103){whatkey='Num Pad 7';} 

	if(e.keyCode==104){whatkey='Num Pad 8';} 

	if(e.keyCode==105){whatkey='Num Pad 9';} 

	if(e.keyCode==100){whatkey='Num Pad 4';} 

	if(e.keyCode==101){whatkey='Num Pad 5';} 

	if(e.keyCode==102){whatkey='Num Pad 6';} 

	if(e.keyCode==97){whatkey='Num Pad 1';} 

	if(e.keyCode==98){whatkey='Num Pad 2';} 

	if(e.keyCode==99){whatkey='Num Pad 3';} 

	if(e.keyCode==96){whatkey='Num Pad 0';} 

	if(e.keyCode==110){whatkey='Num Pad .';} 

	if(e.keyCode==107){whatkey='Num Pad +';} 

	if(e.keyCode==12){whatkey='Num Pad central';hideoutput();} 

	if(e.keyCode==93){whatkey='Quick Menu';hideoutput();} 

	if(e.keyCode==20){whatkey='Caps Lock';hideoutput();} 

	if(e.keyCode==219){whatkey='[';} 

	if(e.keyCode==221){whatkey=']';} 

	if(e.keyCode==220){whatkey='\\';} 

	if(e.keyCode==186){whatkey=';';} 

	if(e.keyCode==222){whatkey="'";} 

	if(e.keyCode==188){whatkey=',';} 

	if(e.keyCode==190){whatkey='.';} 

    document.getElementById('keyoutput2').innerHTML=('You pressed key with Key Code '+e.keyCode+', which is the '+whatkey+' key.'); // shows which key it is; e.g., 13 is Enter and 96 is `

} 

</script>

And the conditions for the keyCode may vary depending on your keyboard, but there it is for you to cater towards your particular use.

So now, you can use e.which and e.keyCode to determine what happens when a key is pressed. And you can use this tool to determine which character code value goes with which key.

tech @ Beacon Deacon

Press a Key, Too!