Unable to implement solution by using .keyup, .keydown ,.keypress

Question

I am trying to write a code which will enable me to fill cell phone no. field with less efforts, my code is as follows.

HTML

<div class="control-group">
   <label class="control-label" for="inputPhone">Cell Phone Number #:</label>
      <div class="controls"> 
      <?php 
         $home_no=$blogger_info[0]->home_phone;
         $home_phone=explode('-',$home_no);
       ?>
       <input class="span3 mr-botom-10" type="tel" id="HomePhone1" name="HomePhone1" value="<?=$home_phone[0]; ?>" onkeydown="phoneNumberValidate('HomePhone1',3,'HomePhone2')" maxlength="3"  pattern="<?php echo NUMBER_PATTERN_3_DIG; ?>" title="<?php echo NUMBER_PATTERN_3_MSG; ?>">   
       <input class="span3 mr-botom-10" type="tel" id="HomePhone2" name="HomePhone2" value="<?=$home_phone[1]; ?>" onkeydown="phoneNumberValidate('HomePhone2',3,'HomePhone3')" maxlength="3"  pattern="<?php echo NUMBER_PATTERN_3_DIG; ?>" title="<?php echo NUMBER_PATTERN_3_MSG; ?>">                                           
       <input class="span3 mr-botom-10" type="tel" id="HomePhone3" name="HomePhone3"  value="<?=$home_phone[2]; ?>" onkeydown="phoneNumberValidate('HomePhone3',4,'')" maxlength="4"  pattern="<?php echo NUMBER_PATTERN_4_DIG; ?>" title="<?php echo NUMBER_PATTERN_4_MSG; ?>">    
     </div>
 </div>

JS code:

function phoneNumberValidate(phone1,match_len,phone2)
{

  //called when key is pressed in textbox
  $("#"+phone1).keypress(function (e) 
  {
     //if the letter is not digit then display error and don't type anything
         if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) 
         {
             return false;
         }
         else
         {
          var phone=$("#"+phone1).val();

          var field_len=phone.length;


           if(field_len==match_len && e.which != 8 )
           {
             $("#"+phone2).focus();
           }
         }
   });

} 

What i am trying to do in above code is that : when user start entering numbers in Cell Phone Number field which is having three input text boxes ,after entering 3 digit in first input box the focus will shift automatically to the next input box.
its working fine with only one major drawback, when user enters 4'th digit it will not get entered in second input box as focus is shifting to that input box, same happens with 8'th digit.
i have tried keydown(gives same result), keyup (validation do not work), please help.

Answer 1

Try this, it will work

function phoneNumberValidate(phone1,match_len,phone2)
{
  //called when key is pressed in textbox
  $("#"+phone1).keypress(function (e) 
  {
    var entered_key = String.fromCharCode(e.which);
     //if the letter is not digit then display error and don't type anything
         if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) 
         {
             return false;
         }
         else
         {
          var phone=$("#"+phone1).val();
          var field_len=phone.length;
           if(field_len==match_len && e.which != 8 )
           {
             $("#"+phone2).focus().val(entered_key);

           }
         }
   });

} 

Answer 2

I modified the code a bit and used keyup insteand. I created an example on jsbin - http://jsbin.com/gugozure/1/edit.

Let me know if this is what you wanted.

function phoneNumberValidate(phone1, match_len, phone2) {

$("#" + phone1).keyup(function (e) {
    if (e.which !== 8 && e.which !== 0 && (e.which < 48 || e.which > 57)) {
        return false;
    } else {
        var phone = $("#" + phone1).val();

        var field_len = phone.length;

        if (field_len == match_len && e.which != 8) {
            $("#" + phone2).focus();
        }
    }
});
}