次のHTMLについて考えてみます。
<form action="">
<input />
<select>
<option>A</option>
<option>B</option>
</select>
<input type="submit" />
</form>
フォーカスがinput
(テキストボックス)にあり、Enterキーを押すと、フォームが送信されます。
しかし、フォーカスがselect
(ドロップダウンボックス)にあり、Enterキーを押した場合、何も起こりません。
これをオーバーライドするJavaScriptを理解できることは知っていますが、Enterキーを押すだけでは機能しない理由を知りたいのですが。
JavaScriptで入力をキャプチャすることで壊れるものはありますか(おそらくドロップダウンのネイティブキーボードアクセシビリティ)?
それは単にコントロールの性質です。 Enterキー(またはマウスクリック)が選択を行います。 Enterキーを押したときにフォームを送信すると、フォームは基本的に使用できなくなるため、ユーザーエクスペリエンスが低下します。
JavaScriptを介して動作を変更することはお勧めしません。これは、デフォルトの動作が標準であり、誰もが期待するものだからです。
(ドロップダウンリストで選択したときにすべてのフォームが送信された場合を想像してみてください。たとえば、Amazon.comで検索することを検討してください。カテゴリを選択してから検索語を入力します。を押してカテゴリを選択した場合入力すると、検索語を入力する前にフォームが送信されます。)
Selectタグはかなり面白いです。 Enterキーが実行するのは、ドロップダウンをクリックして開き、矢印キーを使用してオプションを選択し、Enterキーを押してドロップダウンメニューを閉じることだけです。
私の頭を悩ませているのは、W3仕様です。エンターキーが何をすべきかを述べておらず、すべてのブラウザが同じようにそれを行います!ブラウザプログラマーは、次のいずれかを実行できたはずです。
閉じたドロップダウン選択に焦点を合わせたときに入力すると、次のようになります。
ドロップダウンを開くと、すべてのオプションを表示しながらキーを押すことができます。
フォームを送信します。
それでも誰もがそれを変更しないことに決めました...さらに驚くべきことは、私が13年間ウェブサイトを設計していて、ビジネスアナリストからバグ修正を受け取ったときにこれに気づいたのは今日まででした。 Enterキーを押したら、フォームを送信してください。 小さなポニー を思い出させます。