onfocusイベント

DOM イベント FocusEvent

定義と使用法

onfocusイベントは、要素がフォーカスを取得したときに発生します。

onfocusイベントは、<input>、<select>、<a>と最もよく一緒に使用されます。

ヒント： onfocusイベントは、 onblur イベント逆です。

ヒント： onfocusイベントは、 onfocusin イベント。主な違いは、onfocusイベントがバブルアップしないことです。したがって、要素やその子要素がフォーカスを取得したかどうかを確認したい場合は、onfocusinイベントを使用できます。しかし、onfocusイベントにuseCaptureパラメータを使用することで、onfocusイベントのバブルアップを制御できます。 addEventListener() メソッドの useCapture パラメータを使用してこれを実現します。

インスタンス

例 1

入力フィールドがフォーカスを取得したときにJavaScriptを実行します：

<input type="text" onfocus="myFunction()">

実際に試してみる

ページの下部にTIYインスタンスが多くあります。

構文

HTMLで：

<element onfocus="myScript">

実際に試してみる

JavaScriptで：

object.onfocus = function(){myScript};

実際に試してみる

JavaScriptでaddEventListener()メソッドを使用する方法：

object.addEventListener("focus", myScript);

実際に試してみる

注：Internet Explorer 8 またはそれ以前のバージョンはサポートしていません addEventListener() メソッド。

技術的な詳細

バブル： サポートしていません
キャンセル可能： サポートしていません
イベントタイプ： FocusEvent
サポートされている HTML タグ： すべての HTML 要素、以下のものを除いて：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> そして <title>
DOM バージョン： レベル 2 イベント

ブラウザのサポート

イベント Chrome IE Firefox Safari Opera
onfocus サポート サポート サポート サポート サポート

さらに多くの例

例 2

"onfocus"と"onblur"イベントを一緒に使用：

<input type="text" onfocus="focusFunction()" onblur="blurFunction()">

実際に試してみる

例 3

フォーカスが当たった入力フィールドをクリアします：

<!-- 入力フィールドにフォーカスが当たるとき、現在の値を空文字列に置き換えます -->
<input type="text" onfocus="this.value=''" value="Blabla">

実際に試してみる

例 4

イベントデリゲーション：addEventListener()のuseCaptureパラメータをtrueに設定：

<form id="myForm">
  <input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focus", myFocusFunction, true);
x.addEventListener("blur", myBlurFunction, true);
function myFocusFunction() {
  document.getElementById("myInput").style.backgroundColor = "yellow"; 
}
function myBlurFunction() {
  document.getElementById("myInput").style.backgroundColor = ""; 
}
</script>

実際に試してみる

例 5

イベントデリゲーション：focusin イベントを使用（Firefox はサポートしていません）：

<form id="myForm">
  <input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focusin", myFocusFunction);
x.addEventListener("focusout", myBlurFunction);
function myFocusFunction() {
  document.getElementById("myInput").style.backgroundColor = "yellow"; 
}
function myBlurFunction() {
  document.getElementById("myInput").style.backgroundColor = ""; 
}
</script>

実際に試してみる

DOM イベント FocusEvent