2016-11-18 50 views
0

我正在构建一个移动验证函数。四个输入值相同的类。jQuery函数onKeyUp焦点next/previous

function isNumberKeyNext(evt){ 
 
    
 
     var charCode = (evt.which) ? evt.which : event.keyCode; 
 
     if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) 
 
     { 
 
      return false; 
 
     } 
 
     else 
 
     { 
 
       if ((charCode == 8 || charCode == 46)) { 
 
        $(this).prev('input').focus(); 
 
       } else { 
 
        $(this).next().focus(); 
 
       } 
 
     } 
 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" onkeypress="return isNumberKeyNext(event)" /> 
 
    <input type="number" class="mobile-verify pass" maxlength="1" name="code[]" onkeypress="return isNumberKeyNext(event)" /> 
 
    <input type="number" class="mobile-verify pass" maxlength="1" name="code[]" onkeypress="return isNumberKeyNext(event)" /> 
 
    <input type="number" class="mobile-verify pass" maxlength="1" name="code[]" onkeypress="return isNumberKeyNext(event)" />

HTML。

我只想输入数字,如果它是一个合适的数字,请关注下一个字段,如果退格键被按下,它应该关注前一个字段。我怎样才能做到这一点?我在哪里犯了一个错误?提前致谢。

回答

1

使用此fiddle

HTML:

<div class="container"> 
<input type="number" id="1" class="mobile-verify pass" maxlength="1" name="code[]" onkeyup="return isNumberKeyNext(event,this)" maxlength="1"/> 
    <input type="number" id="2" class="mobile-verify pass" maxlength="1" name="code[]" onkeyup="return isNumberKeyNext(event,this)" maxlength="1" /> 
    <input type="number" id="3" class="mobile-verify pass" maxlength="1" name="code[]" onkeyup="return isNumberKeyNext(event,this)" maxlength="1"/> 
    <input type="number" id="4" class="mobile-verify pass" maxlength="1" name="code[]" onkeyup="return isNumberKeyNext(event,this)" maxlength="1"/> 
    </div> 

JS:

function isNumberKeyNext(evt,$this){ 

     var charCode = (evt.which) ? evt.which : event.keyCode; 
     if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) 
     { 
      $($this).val(''); 
      return false; 
     } 
     else 
     { 
       if ((charCode == 8 || charCode == 46)) { 
        $($this).prev('input').focus(); 
       } else { 
        $($this).next('input').focus(); 
       } 
     } 
    } 
+0

就像一个魅力。谢谢。 –