Angular の入力フィールドにフォーカスを設定する

フォームを表示した後に DOM 要素の focus() メソッドを呼び出すカスタムディレクティブを使うと、入力欄が表示されたときにフォーカスできます。以下の例は、レガシーフレームワークである AngularJS 1.x を使っています。最新の Angular の例ではありません。ng-model は入力値をモデルのプロパティにバインドしますが、入力欄にフォーカスを設定したり、入力内容を検証したりするものではありません。

Angular の入力フィールドにフォーカスを設定する手順

簡単な代替オブジェクトを使うと、focus() の呼び出しだけを切り分けて確認できます。この JavaScript の例は AngularJS もブラウザーも実行しません。ブラウザーでの設定例はこの後に示します。

次の例を実行します。

const input = {
  focused: false,
  focus() {
    this.focused = true;
  }
};

input.focus();
console.log(`Focused: ${input.focused}`);

出力は Focused: true と表示されます。Focused: は英語のラベルのままで、翻訳されていません。

Focused: true

AngularJS では、コントローラーと同じモジュールにディレクティブを登録し、その focus-me 属性を入力欄に追加します。クリックハンドラーがフォームを表示し、フォーカスを開始する値を設定します。短い $timeout を挟むことで、AngularJS がビューの更新を終えてからディレクティブが表示中の要素にフォーカスします。

次の独立したブラウザーページには、モジュール、コントローラー、ディレクティブ、マークアップが含まれています。アプリケーションで CDN を使わない場合は、AngularJS のスクリプト URL をローカルでホストしたファイルの URL に置き換えてください。このページでは、元の例に合わせて AngularJS 1.0.4 を使用しています。このレガシーバージョンは背景を説明するために示しており、新しいアプリケーションには推奨しません。

<!doctype html>
<html ng-app="focusDemo">
<head>
  <meta charset="utf-8">
  <title>AngularJS input focus</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script>
  <script>
    var app = angular.module('focusDemo', []);

    app.controller('DemoController', ['$scope', function($scope) {
      $scope.showForm = false;
      $scope.focusInput = false;
    }]);

    app.directive('focusMe', ['$timeout', function($timeout) {
      return {
        scope: { focusMe: '=' },
        link: function(scope, element) {
          scope.$watch('focusMe', function(value) {
            if (value) {
              $timeout(function() {
                element[0].focus();
                scope.focusMe = false;
              });
            }
          });
        }
      };
    }]);
  </script>
</head>
<body ng-controller="DemoController">
  <button type="button" ng-click="showForm = true; focusInput = true">
    Show the form
  </button>

  <div ng-show="showForm">
    <label for="name">Name</label>
    <input id="name" type="text" ng-model="name" focus-me="focusInput">
    <button type="button" ng-click="showForm = false">Done</button>
    <p>The browser's focus indicator marks the active input.</p>
  </div>
</body>
</html>

AngularJS は focus-me 属性をディレクティブ名 focusMe に正規化します。分離スコープのプロパティには属性と同じ名前を使い、= バインディングでコントローラーの focusInput に接続します。ボタンがその値を true にすると、ウォッチャーはビューの更新後にフォーカスする処理をスケジュールし、その後で値をリセットするため、操作を再び実行できます。ブラウザーが入力欄にフォーカスするには、その欄が表示され、有効になっている必要があります。フォーカスインジケーターの見た目はブラウザー独自のスタイルに従うため、ブラウザーやテーマによって異なることがあります。

フォーカスを設定するとキーボード入力の位置がその欄に移りますが、値が有効だと確認されたり、入力ミスが防がれたりするわけではありません。入力規則が必要な場合は、AngularJS のフォーム検証を別途追加してください。ngBlur は、ユーザーが Tab キーで移動したときなど、要素がフォーカスを失った際に応答します。入力欄にフォーカスを設定したり、フォーカスを外したりするために必要なものではありません。このブラウザーの例は実行検証されていません。

この方法を使うと、フォームの表示時に余分なクリックを減らし、次に入力する場所を明確にできます。自動フォーカスは慎重に使ってください。特に操作手順が長い場合、予期せずフォーカスを移動すると、キーボードやスクリーンリーダーの利用者を戸惑わせることがあります。ラベルを表示し、明確な Tab 移動順序を保ち、フォーカスを受け取った後もユーザーが通常どおり移動できるようにしてください。