无法使用 keyUp 更改表内的输入焦点

Cant change input focus inside table using keyUp

本文关键字：输入 焦点 keyUp      更新时间：2023-09-26

我正在尝试一系列文本输入，当达到maxLength时，焦点将更改为keyUp上的下一个输入，我可以这样做，但我遇到的问题是当文本输入在表格内时，我无法让焦点更改为下一个单元格中的输入。

这是我正在使用的代码：

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
    $('.inputField').keyup(function () {
        if (this.value.length == this.maxLength) {
            $(this).next('.inputField').focus();
        }
    });
});
</script>
</head>
<body>
<table>
    <td><input type="text" maxlength="1" class="inputField" /></td>
    <td><input type="text" maxlength="1" class="inputField" /></td>
    <td><input type="text" maxlength="1" class="inputField" /></td>
<table>
</body>
</html>

https://jsfiddle.net/jzgs6wmn/

我尝试将 ('.inputField'( 更改为 ('input'( 和 ('input.inputField'(，我也尝试过给表一个类，然后使用表类来获取输入，但是我尝试过的任何路径组合都不会改变焦点，所以我不确定在访问表中的输入标签时我应该使用什么。

由于输入位于 td 标签内，因此您必须首先引用父级，然后执行下一步操作并找到具有您要查找的类的子项。

$(document).ready(function(){
    $('.inputField').keyup(function () {
    if (this.value.length == this.maxLength) {
        $(this).parent().next().find('.inputField').focus();
    }
  });
});
相关文章：