onfocusイベント

onfocusイベント(フォーカスイベント)とは、フォーム部品をフォーカスした時のイベント。

構文

HTML

<element onfocus="イベントハンドラ">

INPUT要素
<input type="text" onfocus="イベントハンドラ">

JavaScript

object.onfocus = function(){ イベントハンドラ };

サンプル1


フォーカス回数:0

サンプル1の動作について

  1. クリックやタブ回しなどで、テキスト入力欄にフォーカスを当てると、テキスト入力欄の背景色が黄色に変わる。
  2. テキスト入力欄からフォーカスを外すと、テキスト入力欄の背景色が白色に戻る。
  3. フォーカスする度に、「フォーカス回数:」の右横の数値に1を加算する。

サンプル1について

HTMLドキュメント上でイベントハンドラを登録するサンプル。

サンプル1のソースコード

JavaScript

<script type="text/javascript">
var $countA = 0;
function focusA( $this ) {
 $this.style.background = "yellow";
 document.getElementById( "sampleOutputA" ).innerHTML = ++$countA;
}
function blurA( $this ) {
 $this.style.background = "white";
}
</script>

HTML

<p>
 <input type="text" onfocus="focusA(this);" onblur="blurA(this);" style="background-color: white;">
 <br />
 フォーカス回数:<span id="sampleOutputA">0</span>
</p>

サンプル2


フォーカス回数:0

サンプル2について

JavaScript上で動的にイベントハンドラを登録するサンプル。

サンプル2の動作について

  1. クリックやタブ回しなどで、テキスト入力欄にフォーカスを当てると、テキスト入力欄の背景色が黄色に変わる。
  2. テキスト入力欄からフォーカスを外すと、テキスト入力欄の背景色が白色に戻る。
  3. フォーカスする度に、「フォーカス回数:」の右横の数値に1を加算する。

サンプル2のソースコード

JavaScript

<script type="text/javascript">
window.onload = function () {
 document.getElementById( "sample" ).onfocus = function(){
  focusB( this );
 };
 document.getElementById( "sample" ).onblur = function(){
  blurB( this );
 };
}
var $countB = 0;
function focusB( $this ) {
 $this.style.background = "yellow";
 document.getElementById( "sampleOutputB" ).innerHTML = ++$countB;
}
function blurB( $this ) {
 $this.style.background = "white";
}
</script>

HTML

<p>
 <input type="text" id="sample" style="background-color: white;">
 <br />
 フォーカス回数:<span id="sampleOutputB">0</span>
</p>

スポンサード リンク

カテゴリー: DOM, JavaScript, イベント, フォームイベント, リファレンス パーマリンク