浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【React】テキスト要素にフォーカスが当たった/外れたときに特定の処理を実行する方法

今後も使いそうな処理なので、備忘録としてまとめ。
React で、テキスト要素にフォーカスが当たった、もしくはフォーカスが外れた事を検知し、そのときに特定の処理を実行する方法です。
なお、タイトルには React とありますが、JavaScript でも使用できます。

今回参考にさせていただいた記事はこちら。

[JavaScript] フォーカス・アウト イベントを取得する(onBlur) – コピペで使える JavaScript逆引きリファレンス
https://javascript.programmer-reference.com/js-event-onblur/

 

さて、早速コードはこちら。
必要なところだけ抜粋してます。

onFocusFunc() {
  // フォーカスが当たったときの処理
}
onBlurFunc() {
  // フォーカスが外れたときの処理
}

render() {
  return (
    <input type='text' onFocus={() => this.onFocusFunc()} onBlur={() => this.onBlurFunc()} />
  );
}

コードといってもこれだけです。
あとは各関数に、フォーカスが当たった時/外れたときの処理を記述してください。
なお、onFocusonBlur は、全て小文字ではなく、キャメルケースになっているのでお気をつけください。
素の HTML だと全て小文字なので、うっかり間違えそうです。

処理としては全く複雑なことはしていないのですが、フォーカスが外れたときに発火する onBlur を忘れそうだったので、まとめました。
onFocus はそのままの名前なのでわかりやすいのですが、onBlur って少し覚えにくい…。
なお、blur は「ぼかし」という意味があるようです。…ますますわかりにくい気がするのは私だけでしょうか…。
とにかく、忘れないように気をつけます。

 

以上、React でテキスト要素にフォーカスが当たった/外れたときに特定の処理を実行する方法でした。

  • この記事いいね! (0)