jQuery回车键快速切换下一个input文本框解决方案

最新推荐文章于 2021-05-24 11:05:00 发布

原创最新推荐文章于 2021-05-24 11:05:00 发布 · 4.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #表单 #input #回车

前端开发专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种使用JavaScript和jQuery实现通过回车键在多个文本框间切换的方法。该方法适用于表单中需要快速输入数据的场景，提高了用户交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单中有很多文本框，为了输入方便使用回车键切换到下一个文本框。下面是实现步骤。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>enter</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script>
</head>
<body>
    <div onkeyup="onEnter()">
        <input type="text" name="input" onclick="clickEnter()">
        <input type="text" name="input" onclick="clickEnter()">
        <input type="text" name="input" onclick="clickEnter()">
        <input type="text" name="input" onclick="clickEnter()">
        <input type="text" name="input" onclick="clickEnter()">
        <input type="text" name="input" onclick="clickEnter()">
        <input type="text" name="input" onclick="clickEnter()">
    </div>
    <script>
        var index = 0

        function clickEnter() {
            $('input[name=input]').each(function (i) {
                if ($(this).is(':focus')) {
                    index = i
                }
            })
        }

        function onEnter() {
            if (event.keyCode == 13){
                index++
                if (index >= $('input[name=input]').length) {
                    index = 0
                }
                $('input[name=input]').each(function (i) {
                    if (i == index) {
                        $(this).focus()
                    }
                })
            }
        }
    </script>
</body>
</html>