VirtualMV/JavaScript/Interactivity

From WikiEducator
Jump to: navigation, search



Overview

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]
<head>
<title>onkeydown example</title>
<Meta name="author" content="M Verhaart (2010) virtualmv.com">
<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
	else
		return e.which
}
 
</script>
</head>
<body>
<form name="frmMain">
<p>Press a key</p>
 Key value <input type="text" name="txtShowKey" value=""> 
</form>
</body>
<html>

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 http://hotkeyslist.com/internet-explorer-hotkey-ie-browser-hotkeys-shortcut-keys/
  2. Koch, P-P. (n.d.) Detecting keystrokes. Retrieved March 14, 2010 from http://www.quirksmode.org/js/keys.html
  3. Cooper, R. (n.d.) Javascript keyCode checker tool. Retrieved March 14, 2010 from http://www.ryancooper.com/resources/keycode.asp

virtualMV  |  Superquick wiki guide  |  Please give me some feedback

VirtualMV/JavaScript/Interactivity. (2017). In WikiEducator/VirtualMV wiki. Retrieved November 22, 2017, from http://wikieducator.org/VirtualMV/JavaScript/Interactivity    (zotero)