jQuery zum nächsten Eingabefeld springen

Question

Ich versuche den Benutzern zu erlauben, 1 Zeichen in die Eingabe einzugeben und dann in das Eingabefeld zu springen.

Dies funktioniert wie folgt: https://jsfiddle.net/ej9tvosj/1/

Aber wenn ich die Eingänge innerhalb divs setzen, stoppt die Funktion arbeitet.

https://jsfiddle.net/ej9tvosj/2/

Mein Code, der nicht identisch ist mit dem einen funktioniert, dass der HTML-Teil ist anders funktioniert aber.

$(document).on('input', '.inps', function(event) { 
 

 
    $(this).attr('type', 'tell'); 
 

 
    function showpanel() { 
 
    $('.inps').attr('type', 'password'); 
 
    $(this).attr('type', 'tell'); 
 
    } 
 

 
    // use setTimeout() to execute 
 
    setTimeout(showpanel, 1000); 
 

 
    // check for hyphen 
 
    var myLength = $(this).val().trim().length; 
 
    if (myLength == 1) { 
 
    $(this).next('.inps').focus(); 
 
    $(this).next('.inps').val(''); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <label for="inps">enter number</label> 
 
    <br> 
 
    <div class="split4"> 
 
    <input type="tell" class="form-control inps" maxlength="1"> 
 
    </div> 
 
    <div class="split4"> 
 
    <input type="tell" class="form-control inps" maxlength="1"> 
 
    </div> 
 
    <div class="split4"> 
 
    <input type="tell" class="form-control inps" maxlength="1"> 
 
    </div> 
 
    <div class="split4"> 
 
    <input type="tell" class="form-control inps" maxlength="1"> 
 
    </div> 
 

 
</div>

Könnte jemand bitte zu diesem Thema beraten?

Answer 1

Sie können, wo Sie die nächsteninput Sie input die nächste closest und find navigieren ändern auswählen können - siehe Demo unter:

$(document).on('input', '.inps', function (event) { 
 

 
$(this).attr('type', 'tell'); 
 

 
function showpanel() { 
 
$('.inps').attr('type', 'password'); 
 
$(this).attr('type', 'tell'); 
 
} 
 

 
// use setTimeout() to execute 
 
setTimeout(showpanel, 1000); 
 
    
 
    // check for hyphen 
 
\t var myLength = $(this).val().trim().length; 
 
    if(myLength ==1){ 
 
    $(this).closest('.split4').next('.split4').find('.inps').focus().val(''); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <label for="inps">enter number</label> 
 
    <br> 
 
    <div class="split4"> 
 
    <input type="tell" class="form-control inps" maxlength="1"> 
 
    </div> 
 
    <div class="split4"> 
 
    <input type="tell" class="form-control inps" maxlength="1"> 
 
    </div> 
 
    <div class="split4"> 
 
    <input type="tell" class="form-control inps" maxlength="1"> 
 
    </div><div class="split4"> 
 
    <input type="tell" class="form-control inps" maxlength="1"> 
 
    </div> 
 
    
 
</div>

Answer 2

Sie müssen die Eltern des aktuellen Eingangs auszuwählen & dann finden es Geschwister div & dann Eingang es ist

Kind finden

$(this).parent().next('div.split4').find('input').focus(); 

DEMO

Answer 3

Der Grund liegt in der Verwendung der jQuery next Funktion. Hier die offizielle doc:

Beschreibung: Holen Sie sich das sofort jedes Element folgende Geschwister in den Satz von abgestimmten Elementen. Wenn ein Selektor bereitgestellt wird, ruft er das nächste Geschwister nur ab, wenn es mit diesem Selektor übereinstimmt.

Danach können Sie alle mit einem div gewickelt, sind sie nicht mehr Geschwister das ist, warum dieses Stück Code nicht mehr funktioniert:

$(this).next('.inps').focus();

einfach ändern Sie es mit:

$(this).parent().next('.split4').find('input').focus();

$(document).on('input', '.inps', function(event) { 
 

 
    $(this).attr('type', 'tell'); 
 

 
    function showpanel() { 
 
    $('.inps').attr('type', 'password'); 
 
    $(this).attr('type', 'tell'); 
 
    } 
 

 
    // use setTimeout() to execute 
 
    setTimeout(showpanel, 1000); 
 

 
    // check for hyphen 
 
    var myLength = $(this).val().trim().length; 
 
    if (myLength == 1) { 
 
    $(this).parent().next('.split4').find('input').focus(); 
 
    $(this).parent().next('.split4').find('input').val(''); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <label for="inps">enter number</label> 
 
    <br> 
 
    <div class="split4"> 
 
    <input type="tell" class="form-control inps" maxlength="1"> 
 
    </div> 
 
    <div class="split4"> 
 
    <input type="tell" class="form-control inps" maxlength="1"> 
 
    </div> 
 
    <div class="split4"> 
 
    <input type="tell" class="form-control inps" maxlength="1"> 
 
    </div> 
 
    <div class="split4"> 
 
    <input type="tell" class="form-control inps" maxlength="1"> 
 
    </div> 
 

 
</div>