onfocusイベント（フォーカスイベント）とは、フォーム部品をフォーカスした時のイベント。
構文
HTML
<element onfocus="イベントハンドラ">
例
INPUT要素
<input type="text" onfocus="イベントハンドラ">
JavaScript
object.onfocus = function(){ イベントハンドラ };
サンプル１
フォーカス回数：0
サンプル１の動作について
- クリックやタブ回しなどで、テキスト入力欄にフォーカスを当てると、テキスト入力欄の背景色が黄色に変わる。
- テキスト入力欄からフォーカスを外すと、テキスト入力欄の背景色が白色に戻る。
- フォーカスする度に、「フォーカス回数：」の右横の数値に１を加算する。
サンプル１について
HTMLドキュメント上でイベントハンドラを登録するサンプル。
サンプル１のソースコード
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>
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>
<input type="text" onfocus="focusA(this);" onblur="blurA(this);" style="background-color: white;">
<br />
フォーカス回数：<span id="sampleOutputA">0</span>
</p>
サンプル２
フォーカス回数：0
サンプル２について
JavaScript上で動的にイベントハンドラを登録するサンプル。
サンプル２の動作について
- クリックやタブ回しなどで、テキスト入力欄にフォーカスを当てると、テキスト入力欄の背景色が黄色に変わる。
- テキスト入力欄からフォーカスを外すと、テキスト入力欄の背景色が白色に戻る。
- フォーカスする度に、「フォーカス回数：」の右横の数値に１を加算する。
サンプル２のソースコード
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>
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>
<input type="text" id="sample" style="background-color: white;">
<br />
フォーカス回数：<span id="sampleOutputB">0</span>
</p>