月間26,000PV達成! 収益は毎日発生中! 記事はほぼ毎日更新中! ギランバレー症候群に関する情報を集めています

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

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

 

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

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

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

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

 

 

僕の環境

OS:Windows10

Angular:7

 

 

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

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

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

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

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

 

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

 

 

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

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

①初期フォーカスを当てるためのディレクティブを作成する。

②ディレクティブをHTMLで使用する

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

 

 

Advertisement

 

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

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

 

 

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

 

 

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

 

 

参考サイト

URL:「https://translate.google.com/translate?hl=ja&sl=en&u=https://shekhargulati.com/2017/12/02/adding-autofocus-to-an-input-field-in-an-angular-5-bootstrap-4-application/&prev=search」

 

 

おすすめ書籍

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

 

 

 

まとめ

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

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

ではまた!

Travelerを知らないの?