moving focus on maxlength

[durangod]

Hi i have this working but i have some quesitons.

First is this up to current standards.
Second what is the standard action when you get to the end of this group.
a. leave it on the last input focus for this group
b. focus back on the first input in case they want to start over.
c. move to the next input after this group and stop.


i am seperating the ip input into 4 sections. I will tie then together later.

//js

function moveMax(pfield,nfield)
{
  if(pfield.value.length >= pfield.maxLength)
   {
    document.getElementById(nfield).focus();
   }//close if
}//end function moveMax



//inputs

<input type="text" name="domainIPa" id="domainIPa" value="" size="2" maxlength="3" onkeyup="moveMax(this,'domainIPb');" /> -
<input type="text" name="domainIPb" id="domainIPb" value="" size="2" maxlength="3" onkeyup="moveMax(this,'domainIPc');" /> -
<input type="text" name="domainIPc" id="domainIPc" value="" size="2" maxlength="3" onkeyup="moveMax(this,'domainIPd');" /> -
<input type="text" name="domainIPd" id="domainIPd" value="" size="2" maxlength="3" onkeyup="moveMax(this,'domainIPa');" />

Thanks

[Old Pedant]

Well, I normally find code like this horribly annoying, so I wouldn't do any of the above.

I *hate* it when form code automatically moves me to the next field.

What happens if I made a mistake? What a pain to have to use the mouse to get back to the field and then carefully REMOVE the mistake before entering the correction. So inflexible. Maybe I want to add a letter at then end and *THEN* remove a character in the middle. With this kind of annoying crap I can't do that.

HAVING SAID ALL OF THAT...

I'm unaware of any "standard" in this area. But I would *assume* you'd just keep on going to the next input field. Your "groups" are artificial, anyway, so why make them more significant than they are? Besides, if you do otherwise, then the user must use the mouse (or hit TAB several times) to get to the *correct* next field.

[Old Pedant]

By the by, you could get rid of those useless id's in the fields, you know.

function moveMax(pfield,nfield)
{
  if(pfield.value.length >= pfield.maxLength)
   {
       pfield.form[nfield].focus();
   }
}

//inputs
<input type="text" name="domainIPa" value="" size="2" maxlength="3" onkeyup="moveMax(this,'domainIPb');" /> -
<input type="text" name="domainIPb" value="" size="2" maxlength="3" onkeyup="moveMax(this,'domainIPc');" /> -
<input type="text" name="domainIPc" value="" size="2" maxlength="3" onkeyup="moveMax(this,'domainIPd');" /> -
<input type="text" name="domainIPd" value="" size="2" maxlength="3" onkeyup="moveMax(this,'domainIPa');" />

[durangod]

Thanks, yes i find them annoying was well most of the time, but for certain inputs such as a long game license codes like

QF98-F4S7-GSZ7-FEE7-FA4F

as well as IP address and SSN i do find it handy, that way i can just look at the data to input and just go for it.

It is also a pain to have to type such a long game code and have to move the mouse from section to section cause many games split this up like i did and then you have to mess with the mouse to go field to field as well if i took this away.

Its like 6 of one, half dozen of another... No way to make all of us happy ya know

I do not use this on every field. Just those mentioned above.

Also i had to make myself get into the habbit of doing id's in inputs wether i needed them or not, because i do use them quite a bit in js for validation of input and it is easier to have them in there and do nothing sometimes than it is to have to go back and add them if i need them.

Thanks so much for your help as well as the improvment of the function

[Old Pedant]

i had to make myself get into the habbit of doing id's in inputs wether i needed them or not, because i do use them quite a bit in js for validation of input and it is easier to have them in there...

There is never any reason to use IDs for input validation.

Compare this code (just showing the code needed to access four form fields, no validation):

var fld1 = document.getElementById("field1");
var fld2 = document.getElementById("field2");
var fld3 = document.getElementById("field3");
var fld4 = document.getElementById("field4");

versus this:

var form = document.getElementById("myForm");
var fld1 = form.field1;
var fld2 = form.field2;
var fld3 = form.field3;
var fld4 = form.field4;

Using the form and field names produces shorter code *and* faster code.

What's the excuse for using IDs?

[felgall]

Originally Posted by durangod

<input type="text" name="domainIPa" id="domainIPa" value="" size="2" maxlength="3" onkeyup="moveMax(this,'domainIPb');" /> -
<input type="text" name="domainIPb" id="domainIPb" value="" size="2" maxlength="3" onkeyup="moveMax(this,'domainIPc');" /> -
<input type="text" name="domainIPc" id="domainIPc" value="" size="2" maxlength="3" onkeyup="moveMax(this,'domainIPd');" /> -
<input type="text" name="domainIPd" id="domainIPd" value="" size="2" maxlength="3" onkeyup="moveMax(this,'domainIPa');" />

You really ought to remove the JavaScript out of that HTML and put it with the rest of the JavaScript where it belongs while you are making the other changes to the code to bring it up to date. Jumbling JavaScript with HTML is unnecessary and can cause problems.