按下回车键时如何将焦点移到下一个字段？ 我尝试了很多方法，但没有任何效果

Question

 <!DOCTYPE html>

 <html>

 <head>

 <title></title>

 </head>

Javascript 代码通过按回车在 forms 之间切换。

 <script type="text/javascript">

 $(document).on('keypress', 'input,select', function (e) {

 if (e.which == 13) {

 e.preventDefault();

 var $next = $('[tabIndex=' + (+this.tabIndex + 1) + ']');

    console.log($next.length);

    if (!$next.length) {

        $next = $('[tabIndex=1]');
    }

    $next.focus();
}
});

</script>

<body>

创建 forms

    <input type="number" name="" tabindex="1">

    <input type="number" name="" tabindex="2">

    <input type="number" name="" tabindex="3">

    <input type="number" name="" tabindex="4">

</form>

</body>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-

q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

</html>

我尝试了很多方法，并且在线工作的代码在我的计算机上不起作用。

Answer 1

您的代码有效，但您有一些小错误需要修复。

• 您的 javascript 代码需要放在 jQuery 脚本之后的页脚（ /body之前）中。
• js代码需要放在body标签或者head标签中。
• 您需要设置form标签。

这是您的代码，但工作版本：

<!DOCTYPE html>

<html>
<head>
    <title></title>
</head>

<body>
    <form>
        <input type="number" name="" tabindex="1">
        <input type="number" name="" tabindex="2">
        <input type="number" name="" tabindex="3">
        <input type="number" name="" tabindex="4">
    </form>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

    <script type="text/javascript">
        $(document).on('keypress', 'input,select', function (e) {
            if (e.which == 13) {
                e.preventDefault();
                var $next = $('[tabIndex=' + (+this.tabIndex + 1) + ']');
                console.log($next.length);
                if (!$next.length) {
                    $next = $('[tabIndex=1]');
                }
                $next.focus();
            }
        });
    </script>
</body>
</html>