$ (this) Keine Aktualisierung beim Ändern des Fokus

Question

Ich erzeuge Eingaben (mit einer maximalen Länge von 1) dynamisch mit JavaScript, so dass ich sie nicht alle manuell eingeben muss. Ich habe sie so gemacht, dass wenn ich in sie tippe, sie zum nächsten Eingang gehen und wenn ich die Rücktaste drücke, löschen sie den Wert innerhalb der Eingabe und gehen dann zur vorherigen.

erwartetes Verhalten

Wenn ich Backspace drücken, wird es den Buchstaben löschen, dann zum vorherigen Eingang gehen.

Was passiert eigentlich

Wenn ich Backspace drücke, wird es die Buchstaben löschen, dann tun diese seltsamen Shuffle, und dann drücke ich Backspace wieder, und dann geht es weiter zu dem vorherigen Eingang.

Hier ist eine JSFiddle, die reproduziert das Problem, das ich habe.

Da Stack-Überlauf wird ich dies nicht zulassen, veröffentlichen, ohne Code (hier ist der jQuery-Code):

function generateInputRows() { 
    var inputHTML = ""; 
    for (var i = 0; i < 5; i++) { 
     inputHTML += '<div class="inputColumn"><input maxlength="1" type="text"><div>'; 
     inputHTML += (i + 1); 
     inputHTML += '</div></div>'; 
    } 
    inputHTML += '</div>'; 
    return inputHTML; 
} 

function setUpTyping(){ 
    $('.inputColumn input').on('input',function(event){ 
     var inputs = $('.inputColumn input'); 
     var index = inputs.index(this); 
     inputs.eq(index + 1).focus(); 
    }); 

    $('.inputColumn input').on('keyup', function(e) { 
     if(e.keyCode == 8 && $(this).val() == ""){ 
      var inputs = $('.inputColumn input'); 
      var index = inputs.index(this); 
      inputs.eq(index - 1).focus(); 
     } 
    }); 
} 

$('#rows').html(generateInputRows()); 
setUpTyping(); 

Answer 1

Ich denke, es gibt viele Möglichkeiten, dies zu lösen, wie Tracking an welchem ​​Eingang Sie sind aktiv bearbeiten. Für Ihre aktuelle Logik müssen Sie jedoch nur das Ereignis input anpassen, um zu überprüfen, ob der Wert leer ist, bevor Sie versuchen, das nächste Feld zu fokussieren.

$('.inputColumn input').on('input',function(e){ 
    var inputs = $('.inputColumn input'); 
    var index = inputs.index(this); 
    if ($(this).val() != "") { 
     inputs.eq(index + 1).focus(); 
    } 
}); 

Answer 2

Warum nicht das gleiche Ereignis für die Logik verwenden, wie Sie in diesen Fiddle sehen können?

function generateInputRows() { 
    var inputHTML = ""; 
    for (var i = 0; i < 5; i++) { 
    inputHTML += '<div class="inputColumn"><input maxlength="1" type="text"><div>'; 
    inputHTML += (i + 1); 
    inputHTML += '</div></div>'; 
    } 
    inputHTML += '</div>'; 
    return inputHTML; 
} 

function setUpTyping() { 
    $('.inputColumn input').on('keyup', function(e) { 
    if (e.keyCode == 8 && $(this).val() == "") { 
     var inputs = $('.inputColumn input'); 
     var index = inputs.index(this); 
     inputs.eq(index - 1).focus(); 
    } else { 
     var inputs = $('.inputColumn input'); 
     var index = inputs.index(this); 
     inputs.eq(index + 1).focus(); 
    } 
    }); 
} 

$('#rows').html(generateInputRows()); 
setUpTyping();