Question

我有一个Web应用程序，在一个特定的屏幕上，我必须确保用户使用鼠标单击按钮而不是按Enter或空格。

我写了这段代码：

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

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

编辑：

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

编辑2：

我确实有一个备份计划，它用链接或简单的div替换按钮，并使用click事件以编程方式提交表单。但是，需要额外的工作才能使它看起来像一个按钮，所以我宁可使用按钮。

Answer 1

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

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

Answer 2

错过了你的问题。经过一些googleing如果找到以下技巧：

将keypress事件绑定到您的来源并听取它的密钥代码。如果密钥代码为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;
});

Fiddler：http://jsfiddle.net/ggTDs/

请注意，点击输入后，表单不会被提交！

Answer 3

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

rightAnchor

如何使用键盘防止表单提交（尤其是空格键）

3 个答案: