auto-tab form field javascript revisited

autotab form fields without focus problem

[broniusm]

If you're like me, you can't stand autotab fields when you're not expecting them and can't stand not having them when you expect them! So how do you handle the case where the form auto-tabs for you but doesn't if you have hit tab yourself?

Most autotab field javascript examples I've seen (as well as live sites) are irksome to use. You know the shortcomings..

I set out to fix it, but I'm having cross-browser issues as well as new, undesirable behavior. The theory is this: on keypress, if maxlength is met, then tab to the next field. Sounds simple? Well, how do you allow editing of the previous field?

function handleTyping(event, fld, nextfldname) {
 var charcode = (event.which) ? event.which : event.keyCode;
 var lastkeyval = String.fromCharCode(charcode);
 var nextfld = fld.form[nextfldname];
 var maxlen = fld.maxLength;
 if (fld.value.length >= maxlen) {
 nextfld.focus();
 nextfld.value = lastkeyval;
 return false;
 }
 return true;
}
...
<input id="login_id1" maxlength="4" name="login_id1" size="4" type="text" onKeyPress="return handleTyping(event, this, 'login_id2');">-<input id="login_id2" maxlength="4" name="login_id2" size="4" type="text">

In my snippet above, I have an 8-digit login code split into two fields for easier use.

[broniusm]

Oh, so some of the current shortfalls:
- in ff3 (but ie6 is ok): pressing TAB comes across as a TAB printed value in the next field
- in ff3 (but ie6 is ok): editing the text with backspace/DEL/arrows is treated as printable chars and doesn't allow editing
- neither browser lets you fill the first field, tab back to the first field (thereby selecting the text), then immediately start typing over to replace the text