$（this）在更改焦點時未更新

Question

我使用JavaScript動態生成輸入（最大長度爲1），因此我不必手動輸入全部內容。我讓他們這樣，當我鍵入他們，他們去下一個輸入，當我按下退格鍵時，他們刪除輸入內的值，然後轉到前一個。

預期的行爲

當我按空格鍵，它會刪除該信件，然後去到以前的輸入。

實際發生的

當我按空格鍵，它會刪除該信件，然後做這個奇怪的洗牌，然後我再次按空格鍵，然後將其移動到前面輸入。

這裏是一個JSFiddle重現我遇到的問題。

由於堆棧溢出不會讓我張貼此不代碼（這裏是jQuery代碼）：

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

我覺得有很多的方法來解決這個問題，比如跟蹤其輸入你積極編輯。但是，對於您當前的邏輯，只需在調整input事件以檢查值是否爲空，然後嘗試集中下一個字段。

$('.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

爲什麼不使用相同的事件邏輯，你可以看到在這Fiddle？

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