JQuery関数onKeyUpフォーカスnext/previous

Question

私はモバイル検証機能を構築しています。同じクラスの4つの入力値。

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。

NUMBERSを入力するだけです。適切な番号であれば、次のフィールドにフォーカスを合わせ、バックスペースを押すと前のフィールドにフォーカスを合わせる必要があります。それをどうすれば実現できますか？どこでエラーが発生しましたか？前もって感謝します。

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