Help - Auto Tab

[sawade]

Hi.  I am not real good with javascript.  I am trying to make a script that will auto tab through an html/php form.  But also will allow back tab and highlighting/replacement of fields.

 

Here is what I have so far....

 

function autoTab(field1, len, field2) {
if (document.getElementById(field1).value.length == len) {
	document.getElementById(field2).focus();
	}
}

 

And...

 

Phone Number: 
(<input type="text" name="area" id="area" size="3" maxlength="3" onkeyup="autoTab('area', '3', 'prefix')"/>)
<input type="text" name="prefix" id="prefix" size="3" maxlength="3" onkeyup="autoTab('prefix', '3', 'suffix')"/> - 
<input type="text" name="suffix" id="suffix" size="4" maxlength="4"/> 

 

Thank you!

[rajivgonsalves]

here is what I came up with, had to use a function I found on the internet for the caret pos hope its helpful

 

<script type="text/javascript">
function autoTab(e, field1, len, field2, prev) {
   var keyPressed = (e.which) ? e.which : e.keyCode;
   var pos = doGetCaretPosition(document.getElementById(field1));
    console.log(keyPressed);
   if ((keyPressed == 37 || keyPressed ==  && prev && pos == 0) {
          document.getElementById(prev).focus();
          document.getElementById(prev).select();
   }
   else if(pos == len) {
          document.getElementById(field2).focus();
  }
}

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);
}
</script>

Phone Number:
(<input type="text" name="area" id="area" size="3" maxlength="3" onkeyup="autoTab(event, 'area', '3', 'prefix')"/>)
<input type="text" name="prefix" id="prefix" size="3" maxlength="3" onkeyup="autoTab(event, 'prefix', '3', 'suffix', 'area')"/> -
<input type="text" name="suffix" id="suffix" size="4" maxlength="4" onkeyup="autoTab(event, 'suffix', '', '', 'prefix')"/>

[sawade]

Thanks, I'll give that a wurl.