From WikiEducator
Jump to: navigation, search


This page describes techniques to add interactivity to your web page

VmvIcon Objective.png

Adding Interactivity in JavaScript

By the end of this page you will be able to:

  1. Use JavaScript to detect a keypress

Detecting a keypress

Be aware that you can get the browser tangled if you use Browser trigger keys (e.g. F11 makes the Browser go full screen). If you are using an editor plug-in the editor may use hotkeys also (e.g. Home, End).

  • Some additional resources:
    • Internet explorer hot keys (Hotkeylist, 2010)[1]
    • Detecting keystrokes. (Koch, n.d.)[2]
    • Disabling keys (Cooper, n.d.)[3]
<title>onkeydown example</title>
<Meta name="author" content="M Verhaart (2010)">
<script type="text/javascript" >
/** Detect keydown ======================================== */
document.onkeydown = function( e ) {
	if( e == null ) e = event;
	var intKey = fnGetKey( e );
	document.frmMain.txtShowKey.value = intKey;
function fnGetKey( e ) {
	if( window.createPopup ) //createPopup only exists in IE
		return e.keyCode
		return e.which
<form name="frmMain">
<p>Press a key</p>
 Key value <input type="text" name="txtShowKey" value=""> 

Example :Click here to run jsInt_onkeydown.htm.

VmvIcon References.png References

  1. Hotkeylist (2010). Internet Explorer Hotkey, IE Browser Hotkeys, Shortcut Keys. Retrieved March 14, 2010 from
  2. Koch, P-P. (n.d.) Detecting keystrokes. Retrieved March 14, 2010 from
  3. Cooper, R. (n.d.) Javascript keyCode checker tool. Retrieved March 14, 2010 from

virtualMV  |  Superquick wiki guide  |  Please give me some feedback

VirtualMV/JavaScript/Interactivity. (2022). In WikiEducator/VirtualMV wiki. Retrieved August 12, 2022, from http:    (zotero)