今後も使いそうな処理なので、備忘録としてまとめ。
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()} />
);
}
コードといってもこれだけです。
あとは各関数に、フォーカスが当たった時/外れたときの処理を記述してください。
なお、onFocus と onBlur は、全て小文字ではなく、キャメルケースになっているのでお気をつけください。
素の HTML だと全て小文字なので、うっかり間違えそうです。
処理としては全く複雑なことはしていないのですが、フォーカスが外れたときに発火する onBlur を忘れそうだったので、まとめました。
onFocus はそのままの名前なのでわかりやすいのですが、onBlur って少し覚えにくい…。
なお、blur は「ぼかし」という意味があるようです。…ますますわかりにくい気がするのは私だけでしょうか…。
とにかく、忘れないように気をつけます。
以上、React でテキスト要素にフォーカスが当たった/外れたときに特定の処理を実行する方法でした。
