GlobalEventHandlers.onfocus

GlobalEventHandlers ミックスインの onfocus プロパティは、与えられた要素上の focus イベントを処理する EventHandler です。

focus イベントは、ユーザーがある要素にフォーカスを設定した時に生じます。

非 input 要素上で onfocus を発生させるには、tabindex 属性が与えられていなければなりません (詳細は Building keyboard accessibility back in を参照)。

補足: onfocus の反対が onblur です。

構文

target.onfocus = functionRef;

functionRef は関数名または 関数式 です。この関数は、FocusEvent オブジェクトとその 1 個の引数を受け取ります。

この例は、onblur および onfocus を使用して <input> 要素内のテキストを変更します。

HTML

<input type="text" value="ここをクリック">

JavaScript

let input = document.querySelector('input');

input.onblur = inputBlur;
input.onfocus = inputFocus;

function inputBlur() {
  input.value = 'Focus has been lost';
}

function inputFocus() {
  input.value = 'Focus is here';
}

実行結果

フォームフィールドの内側と外側をクリックしてみてください。それに応じてコンテンツが変化するか観察してください。

仕様

仕様書 策定状況 備考
HTML Living Standard
onfocus の定義
現行の標準

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
onfocusChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

IE とは対称的に、focus イベントを受け取るほとんどすべての要素では、Gecko ブラウザー上のほとんどすべての要素において、このイベントが動作しません。

関連項目