$（this）在更改焦点时未更新

我使用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();

来源

2017-02-23 silverAndroid

我觉得有很多的方法来解决这个问题，比如跟踪其输入你积极编辑。但是，对于您当前的逻辑，只需在调整input事件以检查值是否为空，然后尝试集中下一个字段。

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

来源

2017-02-23 18:34:44 Mark

我不敢相信这件事很简单！ – silverAndroid

为什么不使用相同的事件逻辑，你可以看到在这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();

来源

2017-02-23 18:49:33

工作正常！问题与单独的“输入”事件有关吗？ – silverAndroid

@silverAndroid是的 - 实质上它是你提到的“洗牌”的根源。这里有一个很好的阅读：http://stackoverflow.com/questions/17384218/jquery-input-event –

他们只是在这边，是像shift/shift +选项卡的东西会导致它向前移动一个盒子。显然还有其他的逻辑可以用来防止这种情况，但只是想把它抛出去。 'keyup'并不总是最好的，但它有很多选项可供选择。 – Mark

$（this）在更改焦点时未更新

回答

相关问题