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

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
djdon11
Forum Commoner
Posts: 90
Joined: Wed Jun 20, 2007 5:03 pm

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

Post 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.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

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

Post by Kieran Huggins »

try onkeyup instead - it has to do with when the event fires
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

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

Post 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
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

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

Post 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.
Last edited by VladSun on Thu Jan 24, 2008 12:17 pm, edited 1 time in total.
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

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

Post 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
Post Reply