如何防止使用键盘(特别是空格键)提交表格

Question

我有一个web应用程序，在一个特定的屏幕上，我必须确保用户使用鼠标点击按钮，而不是只按回车键或空格键。

我写了这个代码：

$('button').keydown(function (e) {
    if (e.which === 10 || e.which === 13 || e.which === 32) {
        return false;
    }
});

但是，这只适用于enter。按下按钮上的空格仍然可以提交表单。我只是想知道是什么导致了这种不一致，以及如何解决它？

编辑：

小提琴示例：http://jsfiddle.net/billccn/3JmtY/1/.选中第二个复选框，当焦点在按钮上时按下回车键将没有效果。如果我进一步禁用输入并将keydown陷阱扩展到整个表单，则输入不能用于提交表单。

编辑2:

我确实有一个备份计划，用一个链接甚至一个普通的div替换按钮，并使用单击事件以编程方式提交表单。然而，需要额外的工作来使它看起来像一个按钮，所以我宁愿使用按钮是可能的。

Answer 1

刚刚发现：在keyup上处理空间（32）将阻止单击事件。

更新的小提琴：http://jsfiddle.net/3JmtY/2/

Answer 2

错过了问题的要点。经过一些谷歌搜索，如果发现以下技巧：

将keypress事件绑定到您的from并监听它的密钥码。如果密钥码为13（输入），阻止所有默认操作（event.preventDefaul()），并阻止进一步的事件隐藏（return false;）。

她是一个小提琴手代码示例：

HTML:

<form id="target" action="destination.html">
    <input type="text" value="Hello there" />
    <input type="submit" value="Go" />
</form>
<div id="other">Trigger the handler</div>

JavaScript:

$('#target').keypress(function (event) {
    var code = event.keyCode || event.which; 
  if (code  == 13) {               
    event.preventDefault();
    return false;
  }
});
$('#target').submit(function (event, data2) {
    debugger;
    alert('test');
    return false;
});

小提琴手：http://jsfiddle.net/ggTDs/

请注意，单击enter时不提交表单！

Answer 3

使用以下代码。13表示Enter键，32表示空格键。

$("#form_id").on('keydown keyup keypress', function( e ) {
    if ( e.keyCode == 13 || e.which == 13 || e.which == 32 ) {
        e.preventDefault();
        return false;
    }
});