このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
Element: focusin イベント
利用可能性は限定的
この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。
focusin イベントは、要素がフォーカスを受け取ろうとしているときに発生します。このイベントと focus との主な違いは、 focusin がバブリングを行うのに対し focus は行わないことです。
focusin の反対は focusout であり、これは要素がフォーカスを失ったときに発生します。
focusin イベントはキャンセル不可です。
構文
このイベント名を addEventListener() 等のメソッドで使用してください。
js
addEventListener("focusin", (event) => {});
イベント型
FocusEvent です。 Event を継承しています。
イベントプロパティ
親である UIEvent および間接的に 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 = "";
});
結果
[フレーム]
仕様書
| 仕様書 |
|---|
| UI Events # event-type-focusin |
メモ: UI Events 仕様書ではフォーカスイベントの順序を記述していますが、現在のブラウザーの実装とは異なります。
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。
関連情報
- 関連イベント:
blur,focus,focusout - Focusing: focus/blur