Question

当用户点击TAB或输入表单提交时，我如何制作我的php页面，好像他们按下了回车一样？

我可以看到很多snipets试图让“enter”表现得像“tab”..但是如果我可以让它们反向工作那该死的话......我不喜欢像在表格上按Enter键那样..

为什么我要这样做？

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

这种情况已经持续了大约10年，在100个CSR中有99个，你只需要告诉他们在填写表格上的每个字段后按下输入，这个世界很开心。但是，如果按TAB键，则会丢失刚刚在表单字段中输入的内容。

我有一个新老板，当你按Tab键时希望这些表格能够正常运作..很难告诉你的老板，只需按回车..

现在我知道这不是人们写表格的正常方式，恕我直言，当你输入它时验证每个字段比在最后进行所有验证更好，但这似乎是世界决定走的方式。

无论如何，在我开始从头开始重写这个东西之前......有十几个这样的页面要求用户按下输入而不是标签..我想我会看到我是否可以通过标签提交我的表单样式..

提前感谢您的帮助..

鲍勃

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>

TEST：在FIDDLE上与它有关的问题

https://jsfiddle.net/a96ewgm2/

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

1 个答案: