onblur属性 onfocus属性

Updated / Published

onblur属性と onfocus属性はよく組み合わせて使われるイベント属性（イベントハンドラ）です。onfocous属性の focus event（フォーカスイベント）は、フォーカスが要素に与えられる時、それに応答する際に発生します。また、これとは逆に onblur属性の blur event（ブラーイベント）は、その要素がフォーカスを失った（別の要素に移動した）際に応答するのに発生します。

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
必須
-
非推奨
-
属性値
スクリプト

フォーカス（focus）とは入力イベントを受け取っていることを指します。たとえば、「名前・ E-mail ・コメント」の3つの入力欄があるフォームがあるとすれば、そのうちの名前の入力欄の input要素にフォーカスしている場合、ユーザはこの名前の入力欄にのみテキストを入力することができます。ユーザがフォーカスを移動させるのにはポインティングデバイス(マウスやノートパソコン付属のトラックパッドなど)を使ったり、キーボードの Tab を押してフォーカスを移動させることになります。Tab でフォーカスを移動する場合は、tabindex属性でフォーカスの順番を指定することができます。ただし、tabindex属性を指定する際は、ユーザを混乱させないように移動する順番（数字）と配置の見た目に違いがないように注意してください。

onfocus属性の focus event は、その要素がフォーカスされたときに起動するスクリプトを指定します。これは主にフォームのコントロール部品に使用され、たとえば textarea要素のテキスト入力欄にフォーカスを持った場合、onfocus属性で「コメントをどうぞ」と表示するなど、その要素がフォーカスされた場合に目立たせるなどの効果があります。一方、onblur属性の blur event は、その要素がフォーカスを失ったときに起動するスクリプトを指定します。たとえば、input要素 にフォーカスされた時にフォームの「入力欄の色を変える」、次に input要素のフォーカスが失われた（移動した）時に「元の色に戻す」など onfocus属性と組み合わせて、その部分を目立たせたりするのに役立ちます。

onblur属性 onfocus属性を指定できる要素型

A
B
I
L
S
T

onblur属性 onfocus属性のサンプル

次のスクリプトではinput要素の入力欄に入力がなかった場合に、「この項目は必ず入力してください」とダイアログを表示させ、テキスト入力欄の背景をオレンジ色に変化させて、入力を促し、テキストが入力されると入力欄の背景はオレンジ色から元の白色へと戻ります。そして、textarea要素にフォーカスが移ると、textarea要素の内容となっていた「メッセージをどうぞ」の文字列を消し、textarea要素からフォーカスが失われた場合に、まだ入力がなければ、「メッセージをどうぞ」の文字列を復元します。

function chktext(obj) {
if (!obj.value) {
chktext[obj.name] = false;
alert("この項目は必ず入力してください");
if(!!obj.style) obj.style.backgroundColor='lightpink';
} else {
chktext[obj.name] = true;
if(!!obj.style) obj.style.backgroundColor='white';
} }
</script>
......
<p>[必須]名前：<input type="text" size="40" name="name" value=""
onblur="chktext(this)"></p>
<p>[必須]住所：<input type="text" size="40" name="address" value=""
onblur="chktext(this)"></p>
<textarea name="text" cols="50" rows="7"
onfocus="if(this.value=='メッセージをどうぞ'){this.value='';}"
onblur="if(this.value==''){this.value='メッセージをどうぞ';}">
メッセージをどうぞ</textarea>