2016-06-13 12 views
9

私は、テキスト入力と送信ボタンがあるフォームがあります。フォームが送信されたときにボタンがクリックされるのはなぜですか?

フォームにボタンがない場合は、イベントトリガーを送信するだけですが、タイプ属性のないボタンが1つ以上ある場合、またはtype="submit"のボタンが1つでもある場合は、そのボタンもクリックします。

入力に何かを入力してEnterキーを押すと、ボタンクリックとフォーム送信イベントの両方がトリガーされることがわかります。

例:

<form> 
 
    <input type="text" /> 
 
    <button onclick="alert('submitted');">Submit</button> 
 
</form>

私は、フォームがイベントを提出フォームに自動的にボタンをクリックするとします。

このような動作の原因と理由は不思議です。 フォームを送信するときにボタンをクリックする必要があるのはなぜですか?

+2

[ボタンをクリックしたイベントは、入力したフォームを送信するとトリガされます](http://stackoverflow.com/questions/11760030/click-event-on-button-is-trigged-when-submitting-a -form-with-enter) –

+3

それはそうではありません、私は実際にこの動作を修正する方法ではなく、その理由について疑問に思います。 –

+0

答えの2番目のコメントを読んでください。 –

答えて

8

From the specを提出してはならない入力含まれています

4.10.22.2 Implicit submission

ユーザーエージェントは、ユーザーがフォームのためにそうすること、その後、(テキストフィールドがフォーカスされている間、例えば、打ついくつかのプラットフォーム上で「ENTER」キーを暗黙的にフォームを送信する)暗黙的にフォームを送信させるサポートしている場合そのデフォルトボタンに定義されたアクティベーション動作がある場合、ユーザエージェントはそのデフォルトボタンで合成クリックアクティベーションステップを実行する必要があります。

6.3 [synthetic click] Activation

HTML内の特定の要素は、ユーザーがそれらを活性化できることを意味し、活性化の挙動を、持っています。これは、以下に説明するように、起動メカニズムに依存する一連のイベントをトリガし、通常はクリックイベントで終了します。

ユーザエージェントは、キーボードや音声入力、マウスのクリックなどのアクティベーション動作を持つ要素を手動でトリガできるようにする必要があります。ユーザーが定義したアクティベーションビヘイビアを持つ要素をクリックする以外の方法でトリガすると、そのインタラクションイベントのデフォルトのアクションは、その要素に対して合成クリックアクティベーションの手順を実行する必要があります。だから、Enterを押すSee full script here


は(音声入力装置で)マイクで submitを言うように処理されます。あなたのブラウザは、ユーザーがボタンをクリックしたように動作して、クリックイベントを正しく処理し、マウスを使用できない人のアクセシビリティを向上させる必要があります。

+0

@SergeiBasharovはあなたにとって十分明確であるか、それ以上質問がありますか? –

-2

フォームを送信しているのではなく、実際にボタンを自動的に押しません。フォームはテキストボックスのデフォルト特性であるため、フォームが送信されています。テキストボックスにフォーカスがある場合、Enterキーを押すとフォームが送信されます。 この記事では、より深い説明に入る:https://www.tjvantoll.com/2013/01/01/enter-should-submit-forms-stop-messing-with-that/

EDIT:実際には、より具体的には、フォームが場合にのみ、入力したキーに提出します: 1)Aは、専用フォーム)ボタンをフォームに存在提出、または 2 1つのテキスト入力

は、これらの条件のいずれにも該当しない場合は、インクルードキーがフォーム

関連する問題