フォーカスを変更すると$（this）は更新されません

Question

JavaScriptを使用して入力を（最大長1で）動的に生成するので、すべてを手動で入力する必要はありません。私はそれらに入力すると、次の入力に行き、backspaceを押すと、入力内の値を削除して、前のものに移動するようにしました。

期待される動作

私はバックスペースを押すと、それは、前の入力に進み、文字を削除します。実際に私はバックスペースを押すと、それは文字を削除します

をどうなり

は、この奇妙なシャッフルを行い、その後、私は再びバックスペースを押して、それが前の入力に移動します。

ここには私が持っている問題を再現する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();