无法使用 .keyup、.keydown、.keypress 实现解决方案

Question

我正在尝试编写一个可以让我填写手机号码的代码。字段比较少，我的代码如下。

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代码：

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();
           }
         }
   });

} 

我在上面的代码中尝试做的是：当用户开始在具有三个输入文本框的Cell Phone Number 字段中输入数字时，在第一个输入框中输入 3 位数字后，焦点将自动转移到下一个输入盒子。
它工作正常，只有一个主要缺点，当用户输入第 4 个数字时，它不会进入第二个输入框中，因为焦点正在转移到该输入框，第 8 个数字也会发生同样的情况。
我有试过keydown（给出相同的结果），keyup（验证不起作用），请帮忙。

Answer 1

试试这个，它会起作用的

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

我稍微修改了代码并使用了 keyup。我在 jsbin 上创建了一个示例 - http://jsbin.com/gugozure/1/edit。

如果这是你想要的，请告诉我。

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();
        }
    }
});
}