8

ユーザーがEnterキーを押したときに送信ボタンをトリガーしようとしています。Internet Explorer 9 を除くすべてのブラウザーでうまく機能します。奇妙なことは、IE が、私が指示したことのない別のボタンのクリックもトリガーすることを主張することです。私は何か間違ったことをしていますか、またはこれを修正する方法はありますか?

以下は私のコードです。IEでEnterキーを押すと、期待どおりに送信クリックがトリガーされますが、何らかの理由で「いくつかのボタン」クリックもトリガーされます(キープレスリスナーがなくても):

$('input[type=submit]').click(function () {
    alert('Submit click');
});

//SIMULATE CLICK IF ENTER PRESSED IN SEARCH
$('input[type=text]').keypress(function (event) {
    var keycode = event.keyCode || event.which;
    if (keycode == 13) $('input[type=submit]').click();
});

//ROUTE CLEAR HANDLER
$('button').click(function () {
    alert('Button click');
});

ここで実際のバグを見ることができます: http://jsfiddle.net/h64xD/

4

4 に答える 4

15

考慮すべき点がいくつかあります。

IE9 は、デフォルトで<button/>要素をカウントtype="submit"します。したがって、送信しないようにするには、明示的にする必要があります。

<button type="button">Some button</button>

clickこれを行うと、エミュレートされたイベントがトリガーされず、 2 つのイベントが発生することに気付くでしょう<button/>。その理由は、<form/>要素を明示的に定義していないため、IE9 はコントロールがフォーム内にあると想定しenter、テキストボックスを押すと 2 つのイベントがトリガーされるためです。

  • あなたがエミュレートしているもの
  • デフォルトのフォーム送信ボタンの動作

したがって、この問題を回避するには、次のように明示する必要があります。

<button type="button">Some button</button>
<form><input type="text" /></form>
<input type="submit" value="Submit" />

これらが、IE でこの動作が見られる理由です。@MrSlayerkeypressの回答は、イベントを十分に処理した後にイベントを停止するという 2 番目の問題に対応しています。preventDefault()

于 2012-05-24T14:42:49.503 に答える
5

Enter キーには送信するデフォルトの動作があるため、デフォルトの動作が実行されないようにする必要があります。buttonタグはデフォルトでであるためtype="submit"、Enter キーが押されるとそのボタンが実行されます。

//SIMULATE CLICK IF ENTER PRESSED IN SEARCH
$('input[type=text]').keypress(function (event) {
    var keycode = event.keyCode || event.which;
    if (keycode == 13)
    {
        event.preventDefault();
        $('input[type=submit]').click();
    }
});
于 2012-05-24T14:45:23.637 に答える
1

まず、ユーザーがフォームを押したときにフォームを送信するイベントを手動でアタッチする必要はありませんenter。ブラウザーは既にそれを処理しています。

奇妙なことに、これは要素の順序、暗黙的なフォームの関連付け、および IE がボタンを送信要素として処理するという事実に関係していました。

これらのボタンの順序を入れ替えてみて、私が何を意味するかを確認してください。

<input type="text" />
<input type="submit" value="Submit" />
<button>Some button</button>

当然のことながら、ブラウザーはEnter、テキスト入力に対する応答をリッスンするように既に指示されています。これにより、ブラウザは関連付けられた送信ボタンをクリックします。formさらに、 、または関連付けられた要素を属性を介して相互に明示的に提供していないためform、ブラウザはその関係を作成しようとしています。

あなたのコードでは、<button>要素はテキスト入力の送信ボタンであると想定されていました (暗黙的なフォームの最初の送信ボタンだったため)。そのため、テキスト入力を押すたびEnterに、ブラウザーは関連付けられたボタンのクリック イベントを自然に発生させます。

上記のように要素を並べ替えると、逆のことが起こります。IE は、他の<input>要素をテキスト ボックスに関連付けます。テキストボックスを押すEnterと、送信入力で暗黙的にクリックイベントが発生します。

この動作は.form、さまざまな要素の属性を比較することで確認できます。たとえば、いくつかのid値を追加すると、これらに簡単にアクセスできるようになります。

<button id="fiz">Some Button</button>
<input  id="foo" type="text" />
<input  id="bar" type="submit" value="Submit" />

次に、いくつかの簡単な比較を実行します。

var button = document.getElementById("fiz"); 
var text = document.getElementById("foo"); 
var submit = document.getElementById("bar"); 

button.form === text.form;   // true 
submit.form === text.form;   // true 
button.form === submit.form; // true

<button>したがって、最終的には、要素を であると宣言するtype='button'か、目的の送信ボタンの後に配置することによって、2 つのボタンの間のあいまいさを取り除くのはあなた次第です。

于 2012-05-24T15:07:25.460 に答える
1

ボタンのクリックではなく、フォームの送信をトリガーするのはどうですか?

$('input[type=text]').keypress(function(e) {
     var keycode = event.keyCode || event.which,
         frm = $(this).closest('form');

     if (keycode == 13) {
          e.stopPropagation();
          frm.submit();
          return false;
     }
     return true;
});

- 編集 -

イベントの伝播を停止するためにわずかに更新されました。

于 2012-05-24T14:32:10.210 に答える