"禁止触发表单上的默认按钮"问题的良好解决方案？

Question

我需要一个解决方案来解决"默认按钮"老化问题.即你在文本框中按Enter键,但表单上有一个提交按钮,而不是你想要触发的按钮(或者你可能根本不希望该表格被触发).

我想知道以下'解决方案'.有点hacky,但据我所知,应该是可靠的.

在表格内部,第一件事是一个看不见的按钮.然后一些jquery立即禁用它.如果您在表单上按Enter键,此按钮将被视为"默认按钮"并被触发,但由于"return false"事件处理程序而无效.

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

我的解决方案(我以前没见过,但可能不是唯一的)似乎更简单,我认为非常可靠.您甚至可以判断javascript是否已被禁用且有人点击进入,因为服务器将在表单数据中收到此按钮.

<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
}

这样,除了明确点击此按钮之外,无法提交表单.

Answer 2

这是我在ASP.net项目中用来解决这个问题的方法.

<form runat="server" defaultbutton="DoNothing">
        <asp:Button ID="DoNothing" runat="server" Enabled="false" style="display: none;" />