Question

当按钮触发mouseup事件时，我的目的是将焦点移动到下一个输入元素，这是脚本：

var cleared = false;
$(document).ready(function(){

    //focus on first element
    var focused = null;
    $(".inp").focus(function () {
        focused = $(this);
    }).first().focus();

   //when mousedown, set value 4
    $("#btn").mousedown(function(e) {
        focused.val("4");  
    }).mouseup(function(e) {

        //when mouseup, change bg color
        focused.css("background-color","yellow");

        //and focus on next element
        if (focused && focused.length) {
            focused.next(".inp").focus();
        }       
    });
});

这是我的html元素：

    <table>     
        <tr>
            <td>ABC</td>
            <td><input class="inp"/></td>
            <td><input class="inp"/></td>
            <td><input class="inp"/></td>
        </tr>
    </table>
<button id="btn">4</button>Good

我的问题是重点从未设置下一个，我该如何解决？

Answer 1

<强> Working fiddle

next() ：获取匹配元素集中每个元素的紧随其后的兄弟。如果提供了选择器，则仅当它与该选择器匹配时，它才会检索下一个兄弟。

您没有与课程inp'立即跟随兄弟姐妹'，所以您必须向上移动一次到父td，然后使用next()功能移至下一个td并且然后在这个td中找到类inp并执行焦点。

只需替换：

focused.next(".inp").focus();

通过：

focused.parent().next().find(".inp").focus();

完整JS：

var cleared = false;
$(document).ready(function(){

    //focus on first element
    var focused = null;
    $(".inp").focus(function () {
        focused = $(this);
    }).first().focus();

   //when mousedown, set value 4
    $("#btn").mousedown(function(e) {
        focused.val("4");  
    }).mouseup(function(e) {

        //when mouseup, change bg color
        focused.css("background-color","yellow");

        //and focus on next element
        if (focused && focused.length) {
            focused.parent().next().find(".inp").focus();
        }       
    });
});

希望这有帮助。

Answer 2

尝试将此重点放在下一个元素

上

 $(this).trigger("keydown", [9]);

替换代码中的以下内容

   if (focused && focused.length) {
        focused.next(".inp").focus();
    }

单击按钮，关注下一个元素

2 个答案: