onblur属性と onfocus属性はよく組み合わせて使われるイベント属性（イベントハンドラ）です。onfocous属性の focus event（フォーカスイベント）は、フォーカスが要素に与えられる時、それに応答する際に発生します。また、これとは逆に onblur属性の blur event（ブラーイベント）は、その要素がフォーカスを失った（別の要素に移動した）際に応答するのに発生します。
フォーカス（focus）とは入力イベントを受け取っていることを指します。たとえば、「名前・ E-mail ・コメント」の3つの入力欄があるフォームがあるとすれば、そのうちの名前の入力欄の input要素にフォーカスしている場合、ユーザーはこの名前の入力欄にのみテキストを入力することができます。ユーザーがフォーカスを移動させるのにはポインティングデバイス(マウスやノートパソコン付属のトラックパッドなど)を使ったり、キーボードの Tab を押してフォーカスを移動させることになります。Tab でフォーカスを移動する場合は、tabindex属性でフォーカスの順番を指定することができます。ただし、tabindex属性を指定する際は、ユーザーを混乱させないように移動する順番（数字）と配置の見た目に違いがないように注意してください。
onfocus属性の focus event は、その要素がフォーカスされたときに起動するスクリプトを指定します。これは主にフォームのコントロール部品に使用され、たとえば textarea要素のテキスト入力欄にフォーカスを持った場合、onfocus属性でステータスバーに「コメントをどうぞ」と表示するなど、その要素がフォーカスされた場合に目立たせるなどの効果があります。一方、onblur属性の blur event は、その要素がフォーカスを失ったときに起動するスクリプトを指定します。たとえば、input要素 にフォーカスされた時にフォームの「入力欄の色を変える」、次に input要素のフォーカスが失われた（移動した）時に「元の色に戻す」など onfocus属性と組み合わせて、その部分を目立たせたりするのに役立ちます。
この onblur属性と onfocus属性は、どちらもフォーム要素に指定する属性です。この両属性とよく組み合わせて使用される JavaScript に特殊な this演算子 があります。"this" はフォームのコントロール部品への参照をあたえることができる命令文の一つで、オブジェクト自身の参照を示します。つまり、"this" と書かれた場合は、呼び出し元のコントロール部品となっている "document.formName.elementName" を取得しています。"formName" は form要素の name属性の値、"elementName" は、フォームの各コントロール部品となっている input要素や textarea要素などの name属性の値を指します。では、次のソースでは、"this" は何を示しているかを考えてみましょう。
<form name="field" action="xxx.cgi"><p> <input type="text" name="subject" onfocus="focusSubject(this)">......
この "this" が参照するのは "document.field.subject" となります。このように "this" を使えば、長ったらしいオブジェクト名を書かずに済むというわけです。this演算子は onblur属性, onfocus属性の他にも onchange属性, onclick属性とも良く組み合わせて使われます。
次のスクリプトではテキスト入力がなかった場合に、｢この項目は必ず入力してください｣とダイアログを表示させ、テキスト入力欄の背景をオレンジ色に変化させて、テキストの入力を促します。テキストが入力されると入力欄の背景はオレンジ色から元の白色へと戻ります。
<script type="text/javascript">
function chktext(obj) {
if (!obj.value) {
chktext[obj.name] = false
alert("この項目は必ず入力してください")
if(!!obj.style)obj.style.backgroundColor='orange'
} 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要素にフォーカスが移ると、textarea要素の内容となっていた｢メッセージをどうぞ｣の文字列を消してしまいます。そして、textarea要素からフォーカスが失われた場合に、まだデータが書き込まれていなければ、｢メッセージをどうぞ｣の内容を復元します。
<textarea name="text" cols="50" rows="7"
onfocus="if(this.value=='メッセージをどうぞ'){this.value='';}"
onblur="if(this.value==''){this.value='メッセージをどうぞ';}">
メッセージをどうぞ</textarea>
http://w3g.jp/xhtml/dic/onblur実績：大阪学院 入試サイト New! / 三田市民病院 / 神戸女学院大学 入試サイト / 釣りサンデー