1

我有一个 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 替换按钮，并使用点击事件以编程方式提交表单。但是，需要额外的工作才能使它看起来像一个按钮，所以我宁愿使用一个按钮是可能的。

4

3 回答 3

1

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

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

于 2013-02-16T16:49:32.310 回答
0

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

将事件绑定keypress到您的 from 并收听它的键码。如果键码为13 (enter)，则阻止所有默认操作 ( 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/

请注意，单击输入时不会提交表单！

于 2013-02-15T23:55:29.410 回答
0

使用下面的代码。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;
    }
});
于 2018-12-13T06:44:31.550 回答