在表单中点击输入错误按钮[重复]答案

【问题标题】：Hitting enter in form calling wrong button [duplicate]在表单中点击输入错误按钮[重复]
【发布时间】：2014-11-10 19:35:44
【问题描述】：

HTML：

<form target="" method="post">
    <input name="username" type="text" />
    <input name="password" type="password" />
    <button>Cancel</button>
    <input type="submit" />
</form>

小提琴：http://jsfiddle.net/n9Lpcqyr/

问题：当我按下回车键时，两个按钮都会被触发。用这个 jQuery 测试：

$('button').click(function(){
    alert('help');
});
$("form").submit(function(){
    alert('hey');
});

由于第一个<button> 映射到.remove() 对话框，不再存在要提交的表单。我知道我可以使用 js 将回车键绑定到 inputs，但我正在寻找仅 HTML 的解决方案。我试过tabindex 没有运气。我还能做什么？

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

您可以将取消按钮移到表单之外，如下所示（并使用 CSS 设置样式）：

<form target="" method="post">
    <input name="username" type="text" />
    <input name="password" type="password" />
    <input type="submit" />
</form>
<button>Cancel</button>

【讨论】：