jquery - 'preventing default button on form from firing'问题有好的解决方案吗？

Question

我需要一个解决方案来解决“默认按钮”意外触发的老问题。 即，您在文本框中按 Enter 键，但表单上有一个提交按钮，但该按钮不是您想要触发的按钮(或者您可能根本不希望触发该表单)。

我想知道以下“解决方案”。有点老套，但据我所知应该是可靠的。

在表单内，第一件事是一个不可见的按钮。然后一些 jquery 立即禁用它。如果您在表单上按 Enter 键，则此按钮将被视为“默认按钮”并被触发，但由于“return false”事件处理程序而不会执行任何操作。

我之前见过的解决方案依赖于诸如 keydown 事件处理程序之类的东西，或者其他看似复杂/难以在每个浏览器中测试的东西。

我的解决方案(我以前没有见过，但可能不是唯一的)看起来简单得多，而且我认为非常可靠。您甚至可以判断 JavaScript 是否被禁用以及是否有人按 Enter 键，因为服务器将在表单数据中接收此按钮。

<form action="/store/checkout" method="post">

    <input id="btnFakeSubmit" name="FakeSubmit" src="/images/pixel.gif"
     style="width:1px; height:1px; position:absolute;" type="image" /> 

        <script> 
            $('#btnFakeSubmit').click(function() {
                return false;
            });
        </script> 

有关此解决方案的任何建议 - 包括在所有浏览器中隐藏按钮的最佳方法。

Answer 1

你可以做的一件事是:

• 将提交操作设置为 javascript: return false;
• 不要创建提交按钮
• 创建另一个执行发送的按钮；它调用一个函数，将表单上的操作更改为真实地址，然后调用表单对象上的 submit()。

例如像这样的东西:

<form id="myform" action="javascript: return false">
....
<input type="button" onclick="submit_myform">
...

function submit_myform()
{
   jQuery("#myform").attr("action", "post.php").submit(); //untested
}

这样，除了明确点击此按钮之外，没有其他方法可以提交表单。