Had a requirement in come to me recently in a web application for the ability to move from one field to the next using the [ENTER] key, rather than the [TAB] key. This is a fairly common setup in a rapid 10-Key or Reverse 10-Key data entry. The solutions I found via google weren't very clean. One required the developer to include on onkeypress='' for every textbox, calling a function with the name of the next field to move to. Sounded like a maintenance nightmare. I could imaging getting all 50 fields setup then 1-week after deployment the customer asks to rearrange some fields.
I put together something that worked for me. Maybe it can work for you :) The code has a generic keystroke handler routine that should be easily adaptable to any keystroke interception routines (like customizing the [PAGE UP] or arrow keys). Enjoy
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tab with Enter Key</title>
<script type="text/javascript">
// xBroswer event subscription
function addListener(a,b,c,d){if(a.addEventListener){a.addEventListener(b,c,d);return true;}else if(a.attachEvent){var e=a.attachEvent("on"+b,c);return e;}else{alert("Handler could not be attached");}}
function bind(a,b,c,d){return window.addListener(a,b,function(){d.apply(c,arguments)});}
//
// Generic dispatcher for keystrokes
function handleKeystroke(evt)
{
evt = getEvent(evt);
var asc = getKeyCode(evt);
var chr = getCharacter(asc);
for (var i in this)
{
if (asc == i)
{
this[i](evt);
break;
}
}
}
//
// xBrowser event utilities
function cancelEvent(evt)
{
evt.cancelBubble = true;
evt.returnValue = false;
if (evt.preventDefault) evt.preventDefault();
if (evt.stopPropagation) evt.stopPropagation();
return false;
}
function getEvent(evt)
{
if( !evt ) evt = window.event;
return evt;
}
function getTarget(evt)
{
var target = evt.srcElement ? evt.srcElement : evt.target;
return target;
}
function getKeyCode(evt)
{
var asc = !evt.keyCode ? (!evt.which ? evt.charCode : evt.which) : evt.keyCode;
return asc;
}
function getCharacter(asc)
{
var chr = String.fromCharCode(asc).toLowerCase();
return chr;
}
//
function handleEnterKey(evt)
{
var target = getTarget(evt);
var targetTabIndex = target.tabIndex;
var nextTabIndex = targetTabIndex+1;
var nextElement = getElementByTabIndex(nextTabIndex);
if( nextElement )
{
nextElement.focus();
return cancelEvent(evt);
}
return true;
}
function getElementByTabIndex(tabIndex)
{
var form = document.forms[0];
for( var i=0; i<form.elements.length; i++ )
{
var el = form.elements[i];
if( el.tabIndex && el.tabIndex == tabIndex )
{
return el;
}
}
return null;
}
// Setup our Key Commands
var keyMap = new Array();
var ENTER = 13 // ASCII code
keyMap[ENTER] = handleEnterKey;
// Add the keypress listner to the document object for global capture
bind(document, 'keypress', keyMap, handleKeystroke);
</script>
</head>
<body onload="document.forms[0].elements[0].focus();">
<form id="form1" name="form1">
Textbox One: <input type="text" id="txtOne" name="txtOne" tabindex="1" /><br />
Textbox Two: <input type="text" id="txtTwo" name="txtTwo" tabindex="2" /><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
posted @ Monday, October 09, 2006 6:25 AM