テキストボックスのデフォルトテキスト(valu値)を入力時にクリアさせる方法



お問合わせのフォーム等にあるテキストボックスやテキストエリアの
デフォルトテキスト(valu値)を入力時にクリアさせ、
ちょっとしたユーザビリティの向上を図ってみました。

1.JavaScriptの記述例

<script type="text/javascript">
function textclear() {
	var textarea = document.getElementsByTagName("textarea");
	for (i = 0; i < textarea.length; i++) {
		if (textarea[i].className.search("nodes") < 0) {
			if (textarea[i].value == textarea[i].defaultValue) {textarea[i].className += " ondes"; }
			textarea[i].onfocus = function() {offDes(this); }
			textarea[i].onblur = function() {onDes(this); }
		}
	}
	var input = document.getElementsByTagName("input");
	for (i = 0; i < input.length; i++) {
		if ((input[i].className.search("nodes") < 0) && ((input[i].getAttribute("type") == "text")||(input[i].getAttribute("type") == null))) {
			if (input[i].value == input[i].defaultValue) {input[i].className += " ondes"; }
			input[i].onfocus = function() {offDes(this); }
			input[i].onblur = function() {onDes(this); }
		}
	}
	return;
}
function offDes(from) {
	if (from.className.search("ondes") < 0) {return 0;}
	from.className = from.className.replace(/ondes/, "");
	from.value = "";
	return 1;
}
function onDes(from) {
	if (from.value != "") {return 0;}
	from.className += " ondes";
	from.value = from.defaultValue;
	return 1;
}
</script>

2.CSSの記述例

任意ですが、inputとtextareaタグの文字サイズや色を調整してます。

<style type="text/css">
<!--
input, textarea{
	font-size:12px;
	color:#999999;
	width:300px;
}
-->
</style>

3.HTMLの記述例

bodyタグのonloadに上記のJavaScriptを設定します。

<div id="idWrap">
	<h1>以下のテキストボックスとテキストエリア内のデフォルト表示<br>テキストが入力時は非表示になります。</h1>
	<div class="clT01"><input type="text" name="name" size="30" value="名前を入力して下さい" /></div>
	<div><textarea name="message" cols="27" rows="10" style="">メッセージを入力して下さい</textarea></div>
</div>
</body>

上記text、textareaタグにデフォルトテキストを設定してます。

テキストボックスのデフォルトテキストを入力時にクリアさせるデモ

htmlレベルでは上記で良いかと思いますが、
php等サーバーサイドにvalue値をサブミットする際はデフォルトのテキストは
Jsやphp側で除外する工夫が必要になるかと思います。