Element: focusin イベント
focusin
イベントは、要素がフォーカスを受け取ろうとしているときに発生します。このイベントと focus
との主な違いは、 focusin
がバブリングを行うのに対し focus
は行わないことです。
focusin
の反対は focusout
であり、これは要素がフォーカスを失ったときに発生します。
focusin
イベントはキャンセル不可です。
構文
このイベント名を addEventListener()
等のメソッドで使用してください。
js
addEventListener("focusin", (event) => {});
イベント型
FocusEvent
です。 Event
を継承しています。
イベントプロパティ
例
ライブデモ
HTML
html
<form id="form">
<label>
テキストを入力:
<input type="text" placeholder="テキストを入力" />
</label>
<label>
パスワード:
<input type="password" placeholder="password" />
</label>
</form>
JavaScript
js
const form = document.getElementById("form");
form.addEventListener("focusin", (event) => {
event.target.style.background = "pink";
});
form.addEventListener("focusout", (event) => {
event.target.style.background = "";
});
結果
仕様書
Specification |
---|
UI Events # event-type-focusin |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- 関連イベント:
blur
,focus
,focusout
- Focusing: focus/blur