javascript - 将光标移动到下一个文本字段按 Enter

Question

我的表单中有多个文本字段，我希望当用户在一个文本字段中输入数据并按回车键时，光标会移动到当前文本字段旁边的另一个文本字段。我访问了一些问题，但没有发现它们有用。

$("#username").keypress(function (event) {
    alert("inside function");
    if(event.keyCode == 13) { 
        textboxes = $("input.username");
        debugger;
        currentBoxNumber = textboxes.index(this);
        if (textboxes[currentBoxNumber + 1] != null) {
            nextBox = textboxes[currentBoxNumber + 1];
            nextBox.focus();
            nextBox.select();
            event.preventDefault();
            return false; 
        }
    }
});

这是我试过的代码另一件事是，当在最后一个文本字段中输入数据时，表单将在鼠标单击按钮时提交，而不是按回车键。

Answer 1

这应该有效:

$(".username").keyup(function (event) {
    if (event.keyCode == 13) {
        textboxes = $("input.username");
        currentBoxNumber = textboxes.index(this);
        if (textboxes[currentBoxNumber + 1] != null) {
            nextBox = textboxes[currentBoxNumber + 1];
            nextBox.focus();
            nextBox.select();
        }
        event.preventDefault();
        return false;
    }
});

ENTER 不会在所有浏览器中触发 keypress，而是使用 keyup。还将事件监听器附加到每个 input 而不是包装器。

A live demo at jsFiddle .

您的带有事件委托(delegate)的代码也可以稍作更改:

currentBoxNumber = textboxes.index(event.target);

上面句子中的

this 指的是包装器而不是 input，event.target 指的是触发事件的实际元素.

A live demo at jsFiddle .