檢測到跨度時未選擇下一個輸入元素

Question

我在2個span塊內有一組輸入元素。 我需要通過使用onKeup（）自動選擇下一個輸入元素。 在找到span標記之前，它可以正常工作。 之后，它沒有檢測到。

在下面的代碼中，將檢測到下一個輸入元素，直到第三個輸入框都沒有被檢測到為止。

有人能幫忙嗎？

http://jsfiddle.net/et3escuh/8/

<span>
<input id="opnamenummer6" class="form-control" type="text" name="opnamenummer6" value="" maxlength="1">
<input id="opnamenummer7" class="form-control" type="text" name="opnamenummer7" value="" maxlength="1">
<input id="opnamenummer8" class="form-control" type="text" name="opnamenummer8" value="" maxlength="1">
</span>


<script type="text/javascript">
$('input[class*="form-control"]').keyup(function(event) {
    var $this = $(this);
    var currentLength = $this.val().length;
    var maximumLength = $this.attr('maxlength');
    // if we've filled up this input, go to the next if only numerics are entered.
    if ( (currentLength == maximumLength) && ((event.which >= 48 && event.which <= 57) || (event.which >= 96 && event.which<= 105))) {
        $this.next().select();
    }
    //go to previous input if Backspace or Delete buton is pressed
    if(event.which == 8 || event.which == 46) {
        $(this).val('');
        $(this).prev('input').select();
    }
});

</script>

Answer 1

不要使用next() ，請使用eq()並在索引中添加或減去

$('input[class*="form-control"]').keyup(function(event) {
    var $this = $(this);
    var currentLength = $this.val().length;
    var maximumLength = $this.attr('maxlength');

    if ( (currentLength == maximumLength) && (!isNaN(this.value))) {
        $('input').eq($(this).index('input') + 1).select();
    }

    if(event.which == 8 || event.which == 46) {
        $(this).val('');
        $('input').eq($(this).index('input') - 1).select();
    }
});

小提琴