将焦点设置到表中的下一个输入字段

用户名

我想通过按将下一个输入集中在表字段中enter该表如下所示:

<table>
    <tbody>
        <tr>
            <td>Title 1</td>
            <td><input type="number"></td>
            <td>Unit</td>
        </tr>
        <tr>
            <td>Title 2</td>
            <td><input type="number"></td>
            <td>Unit</td>
        </tr>
        <tr class="group">
            <td colspan="3"></td>
        </tr>
        <tr>
            <td>Title 3</td>
            <td><input type="number"></td>
            <td>Unit</td>
        </tr>
        <tr class="group">
            <td colspan="3"></td>
        </tr>
        <tr>
            <td>Title 4</td>
            <td><input type="number"></td>
            <td>Unit</td>
        </tr>
    </tbody>
</table>

这是我的JS,专注于下一个输入字段。

'change input[type="number"]': (event) => {
    $(event.target).closest('tr').next(':not(.group)').find('input').focus();
}

这是第一个领域的工作。下一个输入字段将成为焦点。但是我不能集中在第三个输入字段上。

我也试过了

'change input[type="number"]': (event) => {
    $(event.target).closest('tr').siblings(':not(.group)').find('input').focus();
}

但是然后将焦点设置到最后一个输入字段,我不明白为什么。

尤娜·苹果树(Yona Appletree)

问题在于jQuerynext()仅查看下一个同级,而不是所有随后的同级。您想要的是nextAll()

$(event.target)
    .closest('tr')
    .nextAll('tr:not(.group)')
    .first()
    .find('input')
    .focus();

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

无法输入下一个输入字段-jQuery

使用angularjs将焦点更改为下一个输入文本

为什么不模拟选项卡按键将焦点移到下一个输入字段?

输入键后,将焦点设置到下一个剑道网格行

达到maxLength时将输入焦点移至下一个输入-Angular 4 / Typescript

将焦点设置为Xamarin表单中的下一个条目

AngularJS-将焦点设置到第一个文本框之后的下一个文本框

将焦点设置到下一个输入元素

jQuery:在进入焦点下一个输入

按下键盘的ENTER按钮时,将内容添加或聚焦到下一个输入字段

如果使用组件,如何将焦点转移到下一个输入?

ion-input:检查ionInput上的输入并将焦点设置在下一个字段

角度设置输入光标到下一个输入,PS:下一个输入标签将动态添加到上一个输入单击的keyEnter上

如何将光标移动到表的下一列中的下一个输入?

如何使用Tab键在下一个标签页中设置焦点?

将焦点设置到下一个输入

在按下Enter键时将焦点设置到下一个nextbox

如何通过输入将焦点放在剑道网格中的下一个单元格上

当用户在Swift中键入2个字符时,将焦点设置在下一个文本字段上

如何通过点击按钮将焦点设置到视图中的下一个 TextField?

将焦点移到另一个 div 中的下一个输入

按下“Enter”按钮时如何将焦点设置在下一个输入上?(javascript)

使用 VueJS 和 Quasar 将焦点更改为“Enter”键上的下一个输入字段

将焦点更改为颤动中的下一个文本字段

jQuery在表中查找下一个输入字段进行计算

如何将焦点设置在 *ngFor 指令中的下一个 <input>

将输入字段填充到下一个输入后更改光标焦点

KeyPress Enter 上的下一个焦点输入字段

如何将请求焦点转移到 Jetpack compose 中的下一个文本字段