$（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）在更改焦點時未更新

回答

相關問題