GlobalEventHandlers.onfocus

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

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 の定義
現行の標準

ブラウザー実装状況

BCD tables only load in the browser

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

関連項目