JavaScript:Interactivity

From virtualMV2015wiki
Jump to: navigation, search
 Home  JavaScript <

Introduction

Overview

This page describes techniques to add interactivity to your web page

Icon Objective.png

Objective 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.

Icon 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

JavaScript:Interactivity. (2017). In virtualMV's ( Michael Verhaart ) wiki. Retrieved December 12, 2017, from http://www.virtualmv.com/wiki/index.php?title=JavaScript%3AInteractivity    (zotero)