Javascript 如何防止使用键盘（特别是空格键）提交表单

我有一个web应用程序，在一个特定的屏幕上，我必须确保用户使用鼠标单击按钮，而不是只按enter或space

我编写了以下代码：

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

但是，这仅适用于enter。按按钮上的空格键仍可以提交表单。我只是想知道是什么导致了这种不一致性，以及如何避免这种不一致性

编辑：

提琴示例：。选中第二个复选框，在焦点位于按钮上时按enter键将无效。如果我进一步禁用输入并将向下键陷阱扩展到整个表单，则不能使用enter来提交表单

编辑2：

---

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

没有抓住你问题的重点。在谷歌搜索之后，if发现了以下窍门：

将

keypress

事件绑定到您的from，并收听其keycode。如果钥匙代码为

13

（输入），防止所有默认操作（

event.preventedFaul（）

）和防止进一步的事件冒泡（

返回false；

）

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

HTML:

小提琴手：

---

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

没有抓住你问题的重点。在谷歌搜索之后，if发现了以下窍门：

将

keypress

事件绑定到您的from，并收听其keycode。如果钥匙代码为

13

（输入），防止所有默认操作（

event.preventedFaul（）

）和防止进一步的事件冒泡（

返回false；

）

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

HTML:

小提琴手：

---

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

刚刚发现：在

keyup

上处理空格（32）将阻止单击事件

---

更新的fiddle:

刚刚发现：

keyup

上的处理空间（32）将阻止单击事件

---

更新的小提琴：使用下面的代码。13表示回车键，32表示空格键

$("#form_id").on('keydown keyup keypress', function( e ) {

    if ( e.keyCode == 13 || e.which == 13 || e.which == 32 ) {
        e.preventDefault();
        return false;
    }
});

---

使用下面的代码。13表示回车键，32表示空格键

$("#form_id").on('keydown keyup keypress', function( e ) {

    if ( e.keyCode == 13 || e.which == 13 || e.which == 32 ) {
        e.preventDefault();
        return false;
    }
});

---

你能详细说明一下吗？如果你能举一个实际错误行为的例子，那就太好了。空格键返回的是

32

，但是你的JSFIDLE代码正在寻找

23

。。。打字错误？@Sparky是的，这是一个打字错误。我已经更新了小提琴。不过，您仍然可以使用空格键“单击”按钮。其效果似乎与在更新的小提琴上单击鼠标完全相同。您能详细说明一下吗？如果你能举一个实际错误行为的例子，那就太好了。空格键返回的是

32

，但是你的JSFIDLE代码正在寻找

23

。。。打字错误？@Sparky是的，这是一个打字错误。我已经更新了小提琴。不过，您仍然可以使用空格键“单击”按钮。其效果似乎与在更新的小提琴上单击鼠标完全相同。不确定您是否阅读了我的问题。我仍然希望表单是可提交的，只是不需要按键。用鼠标点击按钮应该能正常工作。没有抓住问题的重点。在谷歌搜索之后，if发现了以下窍门并更正了我的回答。不确定你是否通读了我的问题。我仍然希望表单是可提交的，只是不需要按键。用鼠标点击按钮应该能正常工作。没有抓住问题的重点。在谷歌搜索之后，if发现了以下技巧并更正了我的答案

$("#form_id").on('keydown keyup keypress', function( e ) {

    if ( e.keyCode == 13 || e.which == 13 || e.which == 32 ) {
        e.preventDefault();
        return false;
    }
});