»
EnglishFrenchVietnamese

Print - X ArrowKeys - JavaScriptBank.com

Full version: jsB@nk » Utility » X ArrowKeys
URL: http://www.javascriptbank.com/arrowkeys-x-arrowkeys.html

X ArrowKeys © JavaScriptBank.comMove an element with the arrow keys and watch keyCode values from all Key events.

Full version: jsB@nk » Utility » X ArrowKeys
URL: http://www.javascriptbank.com/arrowkeys-x-arrowkeys.html



CSS
<link rel="stylesheet" type="text/css" href="s1.css"><style type="text/css"><!--a:link {  color:#009; background:#ccc;  text-decoration:none; padding:1px;}a:visited {  color:#009; background:#ccc;  text-decoration:none; padding:1px;}a:hover {  color:#ccc; background:#009;  text-decoration:none; padding:0;  border-left:1px solid #ccc;  border-top:1px solid #ccc;  border-right:1px solid #333;  border-bottom:1px solid #333;}a:active {  color:#009; background:#ccc;  text-decoration:none;}input {  border:1px solid #333;  color:#000; background:#eee;  width:60px;}.clsX {  position:absolute; margin:0; padding:0;}--></style><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


JavaScript
<script type="text/javascript" src="xlib.js"></script><script type="text/javascript"><!--xInclude('../x_core.js', '../x_event.js');var delta = 10;window.onload = function() {  xResizeTo('id1', 200, 50);  xMoveTo('id1', (xClientWidth()-200)/2, (xClientHeight()-50)/2);  xShow('id1');  xAddEventListener(document, 'keypress', onKeypress, false);  xAddEventListener(document, 'keyup', onKeyup, false);  xAddEventListener(document, 'keydown', onKeydown, false);}function onKeypress(evt){  var e = new xEvent(evt);  xGetElementById('kp').value = e.keyCode;}function onKeyup(evt){  var e = new xEvent(evt);  xGetElementById('ku').value = e.keyCode;}function onKeydown(evt){  var e = new xEvent(evt);  xGetElementById('kd').value = e.keyCode;/*  var dbgMsg =  'type: ' + e.type + ',  keyCode: ' + e.keyCode;  if (xOp7) { window.opera.postError(dbgMsg); }  else { window.status = dbgMsg; }*/  switch (e.keyCode) {    case 37:    // IE and Moz    case 57387: // Opera 7      xLeft('id1', xLeft('id1')-delta); // Left      break;    case 38:    case 57385:      xTop('id1', xTop('id1')-delta);   // Up      break;    case 39:    case 57388:      xLeft('id1', xLeft('id1')+delta); // Right      break;    case 40:    case 57386:      xTop('id1', xTop('id1')+delta);   // Down      break;  }}//--></script><script type="text/javascript" src="x_core.js"></script><script type="text/javascript" src="x_event.js"></script><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<form id="form1" onsubmit="return false"><h2>Event keyCodes:</h2><p>The following will show the keyCode for events <i>keypress</i>, <i>keydown</i>, and <i>keyup</i>.</p><p></p><div>keypress</div><input type="text" id="kp" size="20"><p></p><p></p><div>keydown</div><input type="text" id="kd" size="20"><p></p><p></p><div>keyup</div><input type="text" id="ku" size="20"><p></p></form><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


Files
http://javascriptbank.com/javascript/utility/arrowkeys/s1.csshttp://javascriptbank.com/javascript/utility/arrowkeys/xlib.jshttp://javascriptbank.com/javascript/utility/arrowkeys/x_core.jshttp://javascriptbank.com/javascript/utility/arrowkeys/x_event.js