コース推薦：

DOM イベント FocusEvent

onfocusinイベント：

定義と使用法：

Firefoxではonfocusinイベントがサポートされていませんが、addEventListener()メソッドのオプションのuseCaptureパラメータを使用してonfocusイベントのキャプチャリスナーを通じて、要素の子要素が焦点を得ているかどうかを確認できます。主な違いは、onfocusイベントがバブルしないことです。したがって、要素やその子要素が焦点を得ているかどうかを知りたい場合は、onfocusinイベントを使用する必要があります。onfocusinイベントは要素が焦点を得る直前に発生します。 onfocus イベントonfocusinイベントは

Firefoxではonfocusinイベントがサポートされていませんが、addEventListener()メソッドのオプションのuseCaptureパラメータを使用してonfocusイベントのキャプチャリスナーを通じて、要素の子要素が焦点を得ているかどうかを確認できます。主な違いは、onfocusイベントがバブルしないことです。したがって、要素やその子要素が焦点を得ているかどうかを知りたい場合は、onfocusinイベントを使用する必要があります。。

Firefoxではonfocusinイベントがサポートされていませんが、addEventListener()メソッドのオプションのuseCaptureパラメータを使用してonfocusイベントのキャプチャリスナーを通じて、要素の子要素が焦点を得ているかどうかを確認できます。主な違いは、onfocusイベントがバブルしないことです。したがって、要素やその子要素が焦点を得ているかどうかを知りたい場合は、onfocusinイベントを使用する必要があります。ヒント： onfocusout イベントonfocusinイベントと

逆です。

インスタンス：

例 1

入力フィールドが焦点を得る直前にJavaScriptを実行します：

実際に試してみる

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

ページの下部にはTIYの例が多くあります。

文法：

HTMLでは：< element.addEventListener("focusin",onfocusin="

実際に試してみる

">

JavaScriptでは、addEventListener()メソッドを使用して：JavaScriptでは（Chrome、SafariおよびOpera 15+では正常に動作しない可能性があります）：.addEventListener("focusin",.onfocusin = function(){

実際に試してみる

};

JavaScriptでは、addEventListener()メソッドを使用して：object .addEventListener("focusin",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
onfocusin サポート サポート 52.0 サポート サポート

注：onfocusin イベントは、Chrome、Safari、Opera 15+のJavaScript HTML DOM文法で予期せぬ動作が発生する可能性があります。しかし、HTML属性として使用し、addEventListener()メソッドを使用して使用するべきです（以下の文法例を参照してください）。

さらに多くの例

例 2

"onfocusin"と"onfocusout"イベントを一緒に使用する：

<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">

実際に試してみる

例 3

イベントデリゲーション：addEventListener()のuseCaptureパラメータをtrueに設定します（focusとblur用）：

<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>

実際に試してみる

例 4

イベントデリゲーション：focusin イベントを使用して：

<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