JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTML5のautofocus（オートフォーカス）属性の使い方とサンプルコード

HTML5では、ページの読み込み時に自動的に特定のフォーム要素へフォーカスを当てるための新しい属性「autofocus」が導入されました。基本的な記述方法は次のとおりです。

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

autofocus属性は論理型（ブール値）の属性で、input要素のほかにも、select要素・textarea要素・button要素などに対して指定できます。なお、1つのページに複数設定した場合の動作は保証されないため、1ページにつき1つの要素だけに指定するようにしましょう。

対応ブラウザ

autofocus属性は、Mozilla Firefox、Safari、Chromeをはじめとする主要ブラウザの最新バージョンでサポートされています。

使用例

以下のコードを実行すると、autofocus属性の動作を確認できます。ページを開くと、メールアドレスの入力欄に自動的にカーソルが移動し、すぐに入力を始められるようになります。

<!DOCTYPE HTML>
<html>
   <head>
      <meta charset = "UTF-8">
      <title>autofocus属性のサンプル</title>
   </head>
   <body>
      <form action = "/cgi-bin/html5.cgi" method = "get">
         メールアドレス：<input type = "text" name = "newinput" autofocus/>
         <p>送信ボタンを押して送信してみてください</p>
         <input type = "submit" value = "送信" />
      </form>
   </body>
</html>

活用のポイント

  • autofocusは論理属性のため、「autofocus」と記述するだけで有効になります。
  • スマートフォンやタブレットでは、フォーカスが当たるとソフトウェアキーボードが自動的に表示されることがあります。画面が隠れてしまうケースもあるため、モバイル向けページでは使用の可否を検討しましょう。
  • アクセシビリティの観点から、ユーザーの意図しないタイミングでのフォーカス移動は混乱を招く可能性があります。検索ボックスやログインフォームのように、即時入力が自然な場面でのみ利用することをおすすめします。
  1. HTMLのbutton要素におけるautofocus属性の使い方を解説

    autofocus属性とはHTMLの<button>要素に用意されているautofocus属性は、ページが読み込まれた時点で自動的にそのボタンへフォーカスを設定するための属性です。ユーザーがマウスやキーボードで操作しなくても、最初からボタンが選択された状態になるため、フォーム操作の効率化などに役立ちます。基本構文autofocus属性はブール型の属性のため、値を指定せずに記述するだけで有効になります。基本的な書き方は以下のとおりです。<button type="button" autofocus>上記のように、buttonタグ内に「autofocus

  2. HTML DOM Input Submit autofocusプロパティの使い方を徹底解説

    HTML DOMのInput Submit autofocusプロパティは、HTMLの<input>要素が持つautofocus属性に関連付けられたプロパティです。このプロパティを使うことで、ページが読み込まれた際に送信ボタン（submitボタン）へ自動的にフォーカスを当てるかどうかを、設定または取得することができます。構文（Syntax）autofocusプロパティの構文は以下の通りです。autofocusプロパティの設定submitObject.autofocus = true|false「true」を指定すると送信ボタンが自動的にフォーカスされ、「false」を指定するとフォ