如何使 tab 键的行为类似于在表单上按 enter ..

Question

我怎样才能让我的 php 页面在用户点击 TAB 或 Enter 时提交表单，就好像他们按下了 Enter 键一样？

我可以看到许多片段试图让“enter”像“tab”一样。但该死的，如果我能让它们反向工作..我不想 tab 就像在表单上按 enter 一样..

我到底为什么要这样做？？

背景：我有一个实用程序类型的网站，它供 CSR 在服务器上创建 ftp 用户帐户和其他一些东西，我前段时间用 PHP 编写的，它有数据输入类型的页面输入每个字段，通过提交表单验证它们，然后移动到下一个字段。在页面的末尾，您点击了最后一次提交，它会创建记录。

大约 10 年来一直这样，100 个 CSR 中有 99 个您只需告诉他们在填写表格上的每个字段后按 Enter 键，世界就会很高兴。但是，如果您按 TAB，那么您会丢失刚刚在表单的该字段中输入的内容。

我有一个新老板，他希望这些表格在您按 Tab 时起作用..很难告诉您的老板，只需按 Enter..

现在我知道这不是人们编写表单的正常方式，恕我直言，在您输入时验证每个字段比在最后进行所有验证要好得多，但这似乎是世界决定采用的方式。

无论如何，在我开始从头开始重新编写这个东西之前.. 有十几个这样的页面需要用户按 Enter 而不是标签 .. 我想我会看看我是否可以使用标签来提交我的表单样式..

提前感谢您的帮助..

鲍勃

Answer 1

您可以使用 JQuery.... 假设您有这样的表单：

HTML 表单

        <form enctype="text/plain" method="POST" id="base_form" action="test_this.php">
            <label for="name">Name</label><br />
            <input type="text" name="name" id="name" value="" /><br />
        </form>

那么你的 JQuery 可能看起来像这样：

JAVASCRIPT：JQUERY

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
        <script type="text/javascript">

            ;
            jQuery.noConflict();
            (function ($) {
                $(document).ready(function(e) {
                    // CREATE VARIABLE TO HOLD THE FORM OBJECT
                    var baseForm    = $("#base_form");

                    // LISTEN TO A KEYDOWN EVENT RATHER 
                    baseForm.on("keydown", "#name", function(evt){
                        // GET THE KEY THAT WAS PRESSED
                        var charCode    = evt.keyCode || e.which;   

                        // YOU MAY LOG THE RESULT TO THE CONSOLE TO CONFIRM...
                        console.log(charCode);

                        // IF THE KEY IS THE ENTER(13) OR TAB(9) KEY
                        // SIMPLY SUBMIT THE FORM....
                        if(charCode == 9 || charCode == 13){
                            evt.preventDefault();
                            // SUBMIT THE FORM....
                            // alert("SUBMITTING FORM!");  //<== VERY ANNOYING: SO REMOVE IT
                            baseForm.submit();  
                        }
                    });
                });
            })(jQuery);

        </script>

测试：在 JS FIDDLE 中使用它

https://jsfiddle.net/a96ewgm2/