AngularJSとHTML5でリスト内のテキスト入力にフォーカスを設定する方法

AngularJSアプリケーションで、ng-repeatによって生成されたリスト内のテキスト入力テキスト入力欄へ自動的にフォーカスを設定したいケースはよくあります。たとえば、新しい項目を追加した際に、その入力欄へすぐに入力できるようにしたい場合などです。本記事では、カスタムディレクティブを使ってこの課題を解決する方法を紹介します。

カスタムディレクティブの実装

まず、フォーカスを制御するためのカスタムディレクティブ「focus」を定義します。以下のコードをご覧ください。

newApp.directive('focus', function () {
    return function (scope, element, attrs) {
        attrs.$observe('focus', function (newValue) {
            newValue === 'true' && element[0].focus();
        });
    }
});

コードの解説

• directive('focus', ...)：newAppモジュールに「focus」という名前のカスタムディレクティブを登録します。
• attrs.$observe('focus', ...)：HTML側のfocus属性の値が変更されるたびにコールバック関数が実行されます。属性値は{{}}による補間で文字列として渡されるため、$watchではなく$observeを使うのがポイントです。
• newValue === 'true' && element[0].focus()：属性値が文字列「true」になった場合のみ、該当するDOM要素に対してfocus()メソッドを呼び出します。

HTML側の使用例

次に、作成したディレクティブをHTMLで使用します。ng-repeatで展開されたリスト内のテキスト入力欄に適用する例が次の通りです。

<input type="text" ng-model="cues[$index].text" focus="{{cue.isNewest}}"
class="input-xlarge" />{{cue.isNewest}}

動作の仕組み

この例では、各項目が持つ「cue.isNewest」プロパティの値がfocus属性にバインドされています。新しい項目が追加されてisNewestがtrueになると、ディレクティブがその変化を検知し、該当するテキスト入力欄へ自動的にフォーカスが移動します。これにより、ユーザーはマウス操作なしですぐに入力を開始でき、操作性（UX）が大幅に向上します。

まとめ

attrs.$observeとDOMのfocus()メソッドを組み合わせたシンプルなカスタムディレクティブを作成することで、リスト内の特定のテキスト入力欄を柔軟かつ動的にフォーカス制御できます。AngularJS 1.xでリスト操作の利便性を高めたい場合には、ぜひこの手法を活用してみてください。