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 insteand。我在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();
        }
    }
});
}

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

2 个答案: