Page 1 of 1

focus on another text box when first text box reaches at max

Posted: Thu Jan 24, 2008 2:11 am
by djdon11
Hello friends

i have a problem with javascript

i have follwowing code on my html page

Code: Select all

<input type="text" value="{wphone1}" name="work_ph1" id="work_ph1" onkeyup="return numcheck('work_ph1')" size="3" maxlength="3" onkeypress="Javascript&#058;if(getElementById('work_ph1').value!='' || this.value.length>2)document.getElementById('work_ph2').focus();" onblur="setVisibility('hint_workphone')" onfocus="setVisibility('hint_workphone')"/> -
                        <input type="text" value="{wphone2}" name="work_ph2" id="work_ph2" onkeyup="return numcheck('work_ph2')" size="3" maxlength="3" onkeypress="Javascript&#058;if(this.value.length>2)document.getElementById('work_ph3').focus();" onblur="setVisibility('hint_workphone')" onfocus="setVisibility('hint_workphone')"/> -
                        <input type="text" value="{wphone3}" name="work_ph3" id="work_ph3" onkeyup="return numcheck('work_ph3')" size="4" maxlength="4" onblur="setVisibility('hint_workphone')" onfocus="setVisibility('hint_workphone')"/>
these three text boxes are for entering the phone number in 3-3-4 digits they are working fine when we put the numbers first time but when we dekete the nymbers already entered than the tabindex goes to another text box which should not happen

please give me any solution

thanks.

Re: focus on another text box when first text box reaches at max

Posted: Thu Jan 24, 2008 2:31 am
by Kieran Huggins
try onkeyup instead - it has to do with when the event fires

Re: focus on another text box when first text box reaches at max

Posted: Thu Jan 24, 2008 12:02 pm
by pickle
You should REALLY consider moving your javascript to a separate file, or at least in <script> tags - it'll save you tons of time

Re: focus on another text box when first text box reaches at max

Posted: Thu Jan 24, 2008 12:15 pm
by VladSun
I had similar problems before, but I decided not to solve client-side. Today I tried to solve it:
[js]  function num_check(prev_id, curr_id, next_id){    curr_id = document.getElementById(curr_id);    if (curr_id.type != 'text')        return;    if (prev_id)        prev_id = document.getElementById(prev_id);    if (next_id)        next_id = document.getElementById(next_id);     if (prev_id && (prev_id.value.length != prev_id.maxLength || parseInt(prev_id.value) != prev_id.value))        prev_id.focus();    else if (curr_id.value.length == curr_id.maxLength && parseInt(curr_id.value) == curr_id.value && next_id)        next_id.focus();} function initFields(container_id){    if (!(container_id = document.getElementById(container_id)))        return;     inputs = container_id.getElementsByTagName('input');    if (!inputs.length)        return;     var prev = null;     for (i=0; i < inputs.length; i++)    {        check = new Function('num_check("' + (prev ? prev.id : null) + '", "' + inputs.id + '", "'  + ( i < inputs.length-1 ? inputs[i+1].id : null) + '");');//      inputs.onfocus = check;        inputs.onkeyup = check;        inputs.onblur = check;         prev = inputs;    }        } [/js]

Code: Select all

    <div id='phoneContainer'>        <input type="text" value="" name="work_ph1" id="work_ph1" size="3" maxlength="3"/> -        <input type="text" value="" name="work_ph2" id="work_ph2" size="3" maxlength="3"/> -        <input type="text" value="" name="work_ph3" id="work_ph3" size="4" maxlength="4"/>        <input type="submit" value="OK" id="idOK">    </div>    <script>initFields('phoneContainer');</script>
The only bad thing that is the difficulty of editing the values of these fieleds. That's why onfocus is not handled.

Re: focus on another text box when first text box reaches at max

Posted: Thu Jan 24, 2008 12:16 pm
by Kieran Huggins
pickle++

This would force you to assign the behaviours to each element (which is a good thing) - may I recommend jQuery?

Code: Select all

$(function(){
   $('input[@maxlength]').keyup(function(){
      if($(this).attr('maxlength')==$(this).val().length){
         $(this).next()[0].focus();
      }
   })
})
*untested, requires jquery