1

ある特定の画面で、Enterキーやスペースを押すだけでなく、ユーザーがマウスを使用してボタンをクリックしたことを確認する必要があるWebアプリケーションがあります。

私はこのコードを書きました：

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

ただし、これはEnterに対してのみ機能します。ボタンのスペースを押すと、フォームを送信できます。何がこの不一致を引き起こしたのか、そしてそれをどのように回避するのか疑問に思っていますか？

編集：

フィドルの例：http：//jsfiddle.net/billccn/3JmtY/1/。2番目のチェックボックスをオンにして、ボタンにフォーカスがあるときにEnterキーを押しても効果はありません。さらに入力を無効にして、キーダウントラップをフォーム全体に展開すると、Enterを使用してフォームを送信できなくなります。

編集2：

ボタンをリンクまたはプレーンなdivに置き換え、クリックイベントを使用してプログラムでフォームを送信するバックアップ計画があります。ただし、ボタンのように見せるためには余分な作業が必要なので、ボタンを使用したいのですが可能です。

4

3 に答える 3

1

わかったばかりです。スペース（32）をオンkeyupにすると、クリックイベントが防止されます。

更新されたフィドル：http：//jsfiddle.net/3JmtY/2/

于 2013-02-16T16:49:32.310 に答える
0

あなたの質問のポイントを逃しました。次のトリックが見つかった場合は、いくつかのグーグルの後：

イベントをfromにバインドし、そのkeypressキーコードをリッスンします。キーコードが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/

Enterをクリックしても、フォームは送信されないことに注意してください。

于 2013-02-15T23:55:29.410 に答える
0

以下のコードを使用してください。Enterキーの場合は13、スペースバーの場合は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 に答える