JavaScriptなしのデフォルトのHTMLフォームフォーカス

159

JavaScriptを使用せずに、HTMLフォームにデフォルトの入力フォーカスを設定することは可能ですか？

<html>
  <form>
    Input 1: <input type="text" name="textbox1"/>
    <br/>
    Input 2: <input type="text" name="textbox2"/>
  </form>
</html>

JavaScriptを使用せずにフォームが読み込まれたときに、デフォルトのフォーカスをいずれかのテキストボックスに設定したい（ユーザーがjsを無効にしているときに動作が発生するようにするため）。

html accessibility

— アダム・ジェンキン
ソース

292

HTML5でも実行できますが、それ以外の場合はJavaScriptを使用する必要があります。

HTML5ではautofocus、フォーム要素に次のように追加できます。

<input type="text" name="myInput" autofocus />

これはHTML5をサポートするブラウザー（または、HTML5のこの特定の部分をサポートするブラウザー）では機能しますが、ご存知のように、まだすべての人が使用できるわけではありません。

— ジェイク・ルーカス
ソース

22

注意点...フォーカスされたフォーム要素を設定した場合、スクリーンリーダーのような支援技術（AT）を使用している場合は、バックアップして、フォーカスされたフィールドの前にあるメニューやその他のコンテンツを表示する必要があります。

私の意見では、推奨される方法は、スキップリンクが利用可能な場合を除いて、どのフィールドにもフォーカスを設定しないことです。これにより、ページのコンテンツにスキップするか、ページを上から下に読むことができます。

— グレッグ
ソース

視覚的には非表示になっているが、スクリーンリーダーを介してアクセスできるスキップリンクを追加するのは素晴らしいことです！

— James Cazzetta

アクセシビリティについて学ぶことがたくさんあります。この回答を追加していただき、ありがとうございます。

— Andrew Steitz

3

他の人が言ったように、Javascriptがないと、デフォルトのフィールドを保証できません。ユーザーがアクセスする可能性のある複数のフィールドがある場合に、試してみたい代替オプションは、accesskey属性ます。これは基本的に、ユーザーがブラウジング中にすぐにいずれかのフィールドに戻ることができることを意味します。これはスクリーンリーダーなどのユーザーにとって便利な場合があります。

この主題に関するウィキペディアの記事は非常に役立ちます-http://en.wikipedia.org/wiki/Access_key

0

これは、何らかの形式のスクリプトなしでは不可能です。Googleのホームページでさえ、検索フィールドにフォーカスするためにJavaScriptが必要です。

— エヴァン・ムラウスキ
ソース

1

そうです。Googleは、HTML5をサポートしていないブラウザにJavaScriptを追加するだけです。どのアプリでも検討する価値のあるもの。

— mvbrakel 2014

-8

ただし、tabindex属性を使用して、デフォルトのテキストボックスの最小値を使用できる場合があります。ブラウザのサポートについてはこちらを確認してください：

http://reference.sitepoint.com/html/object/tabindex#compatibilitysection

サイトはそれを示唆しています

（他のほとんどすべての場合-つまりフォームコントロールとリンク-tabindexは優れたサポートを備えています）

— カヒト
ソース

3

「tabindex」属性は、「tabindex = 1」の要素であっても、どの要素にも自動フォーカスを与えません。<tab>（またはクリック）を押すと、タブシーケンスの最初の要素にフォーカスが移動します。

— Clint Pachl