達到 maxlength 后將焦點設置到表中的下一個輸入字段

Question

如何將焦點設置到表格中的下一個輸入字段？

首先，我使用了 JQuery 代碼：但它只有在輸入字段沒有分布在不同的字段上時才有效。 我該如何改進該代碼，或者也許有人知道適用於自動對焦字段的 JS 代碼，該字段分布在 tabindex 之后的 td 和 tr 字段上？

<script>
$(document).ready(function(){
    $('input').keyup(function(){
        if(this.value.length==$(this).attr("maxlength")){
            $(this).next().focus();
        }
    });
});
</script>

我的 html：

<table>
<tr>
<td><input type="text" id="field1"  tabindex="1" name="test1" maxlength = "1"></td>
<td><input type="text" id="field2"  tabindex="2" name="test2"  maxlength = "1">.</td>
</tr>
<tr><td><input type="text" id="field3"  tabindex="3" name="test3"  maxlength = "1"></td></tr>
</table>
                 

Answer 1

要執行您需要的操作，您可以檢索所有input元素並獲取該集合中當前元素的index 。 要移動到下一個輸入，select 使用eq()和下一個增量索引值從集合中獲取它。

另請注意，您的 HTML 無效-您似乎在最終td周圍缺少<tr> 。 我在以下示例中更正了這一點：

 jQuery($ => { let $inputs = $('input').on('input', e => { let $input = $(e.target); let index = $inputs.index($input); if ($input.val().length === $input.prop('maxlength')) { $inputs.eq(index + 1).focus(); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <table> <tr> <td><input type="text" id="field1" tabindex="1" name="test1" maxlength="1"></td> <td><input type="text" id="field2" tabindex="2" name="test2" maxlength="1">.</td> </tr> <tr> <td><input type="text" id="field3" tabindex="3" name="test3" maxlength="1"></td> </tr> </table>

Answer 2

這很惡心，但會工作哈哈

$(document).ready(function(){
    $('table input').keyup(function(){
        if(this.value.length==$(this).attr("maxlength")){
            tableInputs = $('table').find('input');
            $(tableInputs[tableInputs.index(this)+1]).focus();
        }
    });
});