やっほー
【Angular7】初期フォーカスを当てる方法を解説!

【Angular7】初期フォーカスを当てる方法を解説!

  • 2019年2月4日
  • 2021年3月19日
  • Angular
  • 430view

Angularで初期フォーカスを当てたいんじゃー!

画面を作るにあたり、テストが厳密な現場なんかは初期フォーカス位置もテストしたりします。

初期フォーカスを当てたいだけなのに、Angularは情報が少ない!

ということで今回は、Angularで初期フォーカスを当てる方法を解説します。

関連記事

Angular7で新規プロジェクトを作りたい! Angularでプロジェクトを作成するのは非常に簡単です! ということで今回は、Angular7で新規プロジェクトを作成する方法を解説します! 前提 前提として、以下がインスト[…]

超簡単!Angular7で新規プロジェクトを作成する方法!

初期フォーカスを当てる前に

普通のHTML・JavaScriptだと、「autofocus」属性を付与するのが一般的かと思います。

しかし、Angularでこれを使用すると少しばかり問題があります。

何が問題かと言うと、「最初に画面を表示した時にしか初期フォーカスが当たらない」のです。

再度画面を表示した際は、一度画面を表示しているので初期フォーカスの設定は有効になりません。

 

まあ、普通にautofocus属性を使用しても、ちゃんと使えないよってことです。

初期フォーカスを当てる手順

さて、初期フォーカスを当てるための手順は以下の通りです。

  1. 初期フォーカスを当てるためのディレクティブを作成する。
  2. ディレクティブをHTMLで使用する

これだけです。簡単ですね。

初期フォーカスを当てる方法

autofocusディレクティブを作成します。

 

autofocusディレクティブを上記のように書き換えます。

 

あとは、上記のように「appAutofocus」を初期フォーカスを当てたい箇所に設定するだけです!

おすすめ書籍

僕はAngularの勉強をするのに以下の書籍を購入しました。おすすめですよ!

まとめ

いつものことですが、Angularは情報が少ねー。

英語のサイトは多いのですが、いちいち翻訳しないとだめなので、最近は自分のためにも記事にしておりやす。

ではまた!

【Angular7】初期フォーカスを当てる方法を解説!
フォローしてもらえると泣いて喜びます