Question

我使用JavaScript动态生成输入（最大长度为1），因此我不必手动输入所有输入。我做了这些，当我输入它们时，它们转到下一个输入，当我按退格键时，它们删除输入中的值，然后转到上一个。

预期行为

当我按退格键时，它会删除该字母，然后转到上一个输入。

实际发生的事情

当我按退格键时，它会删除该字母，然后执行此奇怪的随机播放，然后再次按退格键，然后移至上一个输入。

这是一个JSFiddle，它可以重现我遇到的问题。

由于Stack Overflow不允许我发布没有代码（这里是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();

更改焦点时$（this）不更新

2 个答案: