Thread: Auto tab movement

Well, this is the simple case. If you want more features like digits only or having backspace jump to "previous" textbox, add this JS code to the head:

Code:

<script type="text/javascript">
var ASCII_CODE_0 = 48;
var ASCII_CODE_9 = 57;
var ASCII_CODE_BACKSPACE = 8;
var ASCII_CODE_ARROW_LEFT = 37;
var ASCII_CODE_ARROW_RIGHT = 39;
var ASCII_CODE_ARROW_UP = 38;
var ASCII_CODE_ARROW_DOWN = 40;

//Set focus on target element when given input value length is equal or more than max chars.
function AutoJump(evt, oInput)
{
	if (typeof evt == "undefined" || !evt)
		evt = window.event;

	var code = (evt.keyCode || evt.charCode);

	//ignore arrow keys
	if (code == ASCII_CODE_ARROW_LEFT || code == ASCII_CODE_ARROW_RIGHT || code == ASCII_CODE_ARROW_UP || code == ASCII_CODE_ARROW_DOWN)
		return false;
	
	//read required attributes:
	var nMaxChars = parseInt(ReadAutoJumpAttribute(oInput, "aj_maxchar"));
	var sTargetID = ReadAutoJumpAttribute(oInput, "aj_target");
	if (isNaN(nMaxChars) || sTargetID.length == 0)
		return false;

	if (oInput.value.length >= nMaxChars)
	{
		var oTarget = document.getElementById(sTargetID);
		if (!oTarget)
		{
			alert("target element " + sTargetID + " does not exist");
			return false;
		}
		oTarget.focus();
	}
	
	//jump back? (backspace in empty box)
	if (evt.keyCode == ASCII_CODE_BACKSPACE && oInput.value.length == 0 && oInput.getAttribute("aj_isempty") == "true")
	{
		//search for input having this one as target
		var arrInputs = document.getElementsByTagName("input");
		for (var i = 0; i < arrInputs.length; i++)
		{
			var oCurInput = arrInputs[i];
			var sCurTarget = oCurInput.getAttribute("aj_target");
			if (sCurTarget && sCurTarget == oInput.id)
			{
				oCurInput.focus();
				var nLength = oCurInput.value.length;
				if (nLength > 0)
					doSetCaretPosition(oCurInput, nLength + 1);
				break;
			}
		}
	}
	
	return true;
}

function DigitsOnly(evt)
{
	if (typeof evt == "undefined" || !evt)
		evt = window.event;
	
	var code = (evt.keyCode || evt.charCode);
	
	return (code >= ASCII_CODE_0 && code <= ASCII_CODE_9);
}

function CheckIsEmpty(oInput)
{
	oInput.setAttribute("aj_isempty", oInput.value.length == 0 ? "true" : "false");
}

function ReadAutoJumpAttribute(element, attName)
{
	var attValue = element.getAttribute(attName);
	if (!attValue || attValue.length == 0)
		alert("missing attribute in " + element.id + ": " + attName);
	return attValue;
}
</script>

<script language="JavaScript" type="text/javascript">

   /*
   **  Returns the caret (cursor) position of the specified text field.
   **  Return value range is 0-oField.length.
   */
   function doGetCaretPosition (oField) {

     // Initialize
     var iCaretPos = 0;

     // IE Support
     if (document.selection) { 

       // Set focus on the element
       oField.focus ();
  
       // To get cursor position, get empty selection range
       var oSel = document.selection.createRange ();
  
       // Move selection start to 0 position
       oSel.moveStart ('character', -oField.value.length);
  
       // The caret position is selection length
       iCaretPos = oSel.text.length;
     }

     // Firefox support
     else if (oField.selectionStart || oField.selectionStart == '0')
       iCaretPos = oField.selectionStart;

     // Return results
     return (iCaretPos);
   }


   /*
   **  Sets the caret (cursor) position of the specified text field.
   **  Valid positions are 0-oField.length.
   */
   function doSetCaretPosition (oField, iCaretPos) {

     // IE Support
     if (document.selection) { 

       // Set focus on the element
       oField.focus ();
  
       // Create empty selection range
       var oSel = document.selection.createRange ();
  
       // Move selection start and end to 0 position
       oSel.moveStart ('character', -oField.value.length);
  
       // Move selection start and end to desired position
       oSel.moveStart ('character', iCaretPos);
       oSel.moveEnd ('character', 0);
       oSel.select ();
     }

     // Firefox support
     else if (oField.selectionStart || oField.selectionStart == '0') {
       oField.selectionStart = iCaretPos;
       oField.selectionEnd = iCaretPos;
       oField.focus ();
     }
   }

</script>

Then have this in your HTML:

Code:

<input type="text" id="phone1" maxlength="3" size="3" aj_maxchar="3" aj_target="phone2" onkeyup="AutoJump(event, this);" onkeypress="return DigitsOnly(event);" onkeydown="CheckIsEmpty(this);" /> - 
<input type="text" id="phone2" maxlength="3" size="3" aj_maxchar="3" aj_target="phone3" onkeyup="AutoJump(event, this);" onkeypress="return DigitsOnly(event);" onkeydown="CheckIsEmpty(this);" /> - 
<input type="text" id="phone3" maxlength="4" size="4" aj_maxchar="4" aj_target="phone1" onkeyup="AutoJump(event, this);" onkeypress="return DigitsOnly(event);" onkeydown="CheckIsEmpty(this);" />

Tested on IE8 and Chrome, not sure if it's 100% working in other browsers.

lol M.. you don't have to understand it right away, start by using it and try understanding slowly but surely.