入力フォーム初期値クリア

概要

初期値が設定してある入力フォームが選択された時に、自動的に初期値をクリアするスクリプトです。

説明

　text属性を持つinput要素とtextarea要素にはユーザーがデータを入力することができます。それぞれ初期値を設定することができ、入力欄の補足説明などに利用できます。また古いブラウザでは初期値がない場合、正しく処理できない場合があるため初期値を設定しておくことが望ましいとも言われます。W3CのWAIにより勧告されたWeb Content Accessibility Guidelines 1.0にも記載されています。

　しかし、初期値を設定していると、ユーザーはその欄に記入する際に初期値を消去しなくてはなりません。このスクリプトでは入力フォームが選択されると自動的に初期値を消去することでユーザーの手間を軽減します。

動作確認ブラウザ

以下の環境で動作を確認しました

• Internet Explorer 6(Windows)
• Internet Explorer 5.0(Windows)
• Internet Explorer 5(MacOS)
• Mozilla 0.9.6(Windows)
• Mozilla 0.9.6(MacOS)
• Netscape Communicator 4.78(Windows)

Netscape Communicator 4.x(MacOS)、Opera 6.0bはinput要素の場合のみ動作します。textarea要素では動作しません。

設定方法

HTMLファイルのhead要素内もしくは外部jsファイルに以下の関数を記述します。

function formClear(targetElement){
	if(targetElement.value == targetElement.defaultValue){
		targetElement.value = "";
	}
}

初期値を消去したいinput要素もしくはtextarea要素にonfocus="formClear(this)"を追加します。

補足

• ユーザーが初期値と同じ内容を入力しても、選択を解除したのち再度選択するとフォームがクリアされます。ユーザーが入力しないような初期値を設定するようにしてください。
• defaultValueプロパティはJavaScript1.0以降のプロパティですが、私の環境ではNetscape Communicator 4.7(MacOS)、Opera 6.0b(Windows)、iCab2.53(MacOS)ではうまく動作しませんでした。