javascript - 在表单中按回车键调用错误按钮

Question

这个问题已经有答案了:

Can I make a <button> not submit a form? (8 个回答)

已关闭 8 年前。

HTML:

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

fiddle :http://jsfiddle.net/n9Lpcqyr/

问题:当我按回车键时，两个按钮都会被触发。使用此 jQuery 进行测试:

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

因为第一个<button>映射到.remove()对话框中，表单不再存在，无法提交。我知道我可以将 Enter 键绑定(bind)到 input s 和 js，但我正在寻找一个仅 HTML 的解决方案。我试过tabindex没有运气。我还能做什么？

Answer 1

您可以将取消按钮移到表单之外，如下所示(并使用 CSS 进行样式设置):

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