仮想通貨ブログに専念するため、たまーに更新します!仮想通貨ブログはこちら!

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

  • URLをコピーしました!
悩んでいる男の子

Angularで初期フォーカスを当てる方法が分からないんだよね。。

こんな悩みを解決します。

  • 本記事の内容
  • Angularで初期フォーカスを当てる方法
  • 本記事の執筆者
いずみん(@izumin_0401)

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

いずみん

すぐ読み終わるので、是非最後まで読んでみてください!

プログラミングを学びたい方必見!

オンライン特化のプログラミングスクールなら「」が超おススメ!

副業としてプログラミングを学びたい方にもおすすめのスクールです!

  • 初心者が9割以上なので挫折せずに学べる!
  • 受講者に副業の仕事を1案件以上斡旋! ※条件あり
  • オンライン完結型なので、在宅でもお仕事可!
  • プロのメンターがサポートしてくれる!

キャリアカウンセリングメンター相談無料でできるのもおすすめポイントです!

目次

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

通常のHTML・JavaScriptの場合、「autofocus」属性を付与するのが一般的です。

しかし、Angularで「autofocus」を使用すると「最初に画面を表示した時にしか初期フォーカスが当たらない」という問題があります。

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

いずみん

autofocus属性を使用しても、Angularではうまく機能しないということですね。

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

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

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

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

ng g directive autofocus

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

import { Directive, ElementRef, OnInit } from '@angular/core';

@Directive({
  selector: '[appAutofocus]'
})
export class AutofocusDirective implements OnInit {

  constructor(private el: ElementRef) { }

  ngOnInit() {
    this.el.nativeElement.focus();
  }

}

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

<input formControlName="companyCode" required appAutofocus>

あとは、初期フォーカスを当てたい箇所に設定するだけです。

まとめ

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

分かってしまえば意外と簡単でしたね。

ではまた!

  • おすすめ本はこちら!
いずみん

僕は↑の本でAngularの勉強をしました!
非常に分かりやすいのでおすすめです!

  • 自由な生き方がしたいなら!

自由な生き方をするためには、稼ぐスキルを身に付けなければなりません。

当サイト「リバトレ」では稼ぐスキルに関する情報を日々発信しているので、興味のあるものから見て頂ければ嬉しいです。

稼ぐスキルを身に付けよう!!
SNSもフォローしてね!

この記事が気に入ったら
いいね または フォローしてね!

シェアするんやで!
  • URLをコピーしました!
  • URLをコピーしました!
目次