按 Enter 提交 jQuery 论坛答案

【问题标题】：jQuery Forum Submission By Hitting Enter按 Enter 提交 jQuery 论坛
【发布时间】：2012-04-13 02:10:42
【问题描述】：

我的表单有一个不寻常的问题（这里是精简版）：

<script>
    (function($){
        $("form").submit(function(){ 
            alert('Checkout time!'); 
        });
        $("button[name='process_order']").click(function(){ 
            alert('Button Checkout time!'); 
        });
        $("button[name='back']").click(function(){ 
            alert('Back Button'); 
        });
    })(jQuery);
</script>

<form>
    <input type="text" name="moo1" tabindex="1" />
    <input type="text" name="moo2" tabindex="2" />
    <button name="back" tabindex="4">Back</button>
    <button name="process_order" tabindex="3">Process Order</button>
</form>

按钮可以正常工作，但是，如果我在其中一个具有焦点的文本框时按 Enter 键，则会触发“后退按钮”操作......即使表单的提交处理程序设置为“结帐”.. .

【问题讨论】：

如何避免两个按钮引入的冲突，并将back 操作设置为样式链接？
表单中的按钮默认是提交按钮。将其替换为类型按钮。

标签： javascript jquery html webforms

【解决方案1】：

您可以将 process_order 更改为此：

<input type="submit" name="process_order" value="Process Order" tabindex="3" />

然后改为：

<form id="myForm">

然后，将 .submit() 处理程序绑定到它

$('#myForm').submit(function()
{
    alert('Button checkout time!');
    return false; //we return false so that it doesn't refresh the page
});

【讨论】：

这解决了它......我仍然觉得奇怪的是这种情况正在发生......：S
其他一些答案表明原因是默认情况下是提交按钮，更改类型是另一种解决方案。然而，我提供的解决方案是技术上应该怎么做。它是最灵活的，可以让您的代码保持可扩展性。

【解决方案2】：

您的表单有两个提交按钮，表单将通过激活第一个提交按钮使用回车键提交。改变

<button name="back" tabindex="4">Back</button>

到

<button type="button" name="back" tabindex="4">Back</button>

避免浏览器将第一个按钮解释为提交按钮

【讨论】：

表单中button element 的默认类型是提交。