検索ボックスにデフォルトのテキストをセットする

企業、特にメーカー系のWebサイトとかには、大抵、ページ左肩辺りにそのWebサイトの
サイト内検索用テキストボックスが設置されてたりします。ここやここみたいな感じで。
で、その検索ボックスには予め「キーワードを入力して下さい」といった感じの、デフォルトのテキストが
セットされてる訳ですが、オンフォーカスすると、デフォルト表示されてたテキストが消えて、フォーカスを
外すとまたテキストが表示されたりします。
訳あって、そんな感じのを作ってみたんで載っけてみます。

ソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Set SearchBox Default Text</title>
<style type="text/css">
#txt1 {
	color: #000;
	border: solid 1px #7F9DB9;
	background-color: #F0F8FF;
	filter: alpha(opacity=50);
			-moz-opacity:0.5;
			opacity:0.5;
}
div.searchboxbgmsg {
	position: absolute;
	z-index: -99;
	font-size: 0.8em;
	line-height: 1.2em;
	padding-left: 0.3em;
	padding-top: 0.2em;
}
</style>
<script type="text/javascript">
//---★
var elm;
function getElementPosition(element) {
	//http://tech.ocit.jp/?eid=703844  左記サイトのを拝借してます
	var offsetTrail = (typeof element == 'string') ? doc.getElementById(element): element;
	var x = 0; var y = 0;
	while (offsetTrail) {
		x += offsetTrail.offsetLeft;
		y += offsetTrail.offsetTop;
		offsetTrail = offsetTrail.offsetParent;
	}
	if (navigator.userAgent.indexOf('Mac') != -1 && typeof doc.body.leftMargin != "undefined") {
		x += doc.body.leftMargin;
		y += doc.body.topMargin;
	}
	return ({ "left": x, "top": y });
}

function switchText(e) {
	var tgt = e.srcElement || e.target;
	if (e.type == 'focus') { if (elm.parentNode) document.body.removeChild(elm);
	} else { if (tgt.value == '') document.body.appendChild(elm); }
}

function setDefaultSearchBoxText(argID) {
	var inp = document.getElementById(argID);
	if (document.attachEvent) {
		inp.attachEvent('onfocus', switchText);
		inp.attachEvent('onblur', switchText);
	} else if (document.addEventListener) {
		inp.addEventListener('focus', switchText, false);
		inp.addEventListener('blur', switchText, false);
	}
	elm = document.createElement('DIV');
	var pos = getElementPosition(inp);
	with (elm) {
		style.top = pos.top + 'px';
		style.left = pos.left + 'px';
		className = 'searchboxbgmsg';
		innerHTML = '検索値を入力';
	}
	document.body.appendChild(elm);
}
//---★
//★〜★間を外部scriptにして、↓でcallすればok
window.onload = function() { setDefaultSearchBoxText('txt1'); }
//動作確認用
function showTextboxValue() {
	alert(document.getElementById('txt1').value);
}
</script>
</head>
<body>
<div id="test">
	<form id="SAMPLE" action="javascript:showTextboxValue();">
		<p>
			<input id="txt1" type="text" value="">
			<input type="submit" value="検索">
		</p>
	</form>
</div>
</body>
</html>

説明

検索テキストボックスと同じ位置にdiv要素を作成
そのdiv要素でデフォルトのテキストを表示*1
検索テキストボックスにオンフォーカスで、そのdiv要素を削除(removeChild)
検索テキストボックスにフォーカスが外れて且つ、テキストボックスのvalueが空ならそのdiv要素を追加(appendChild)

って感じ。
こうやれば、検索テキストボックスが空(デフォルトテキストは表示)でsubmitしても、
その値でサイト内検索とかがかからない事。
submit後にキーワードの値を判定させりゃ済む訳ですけど、ちょっとなぁ…って感じがしたもんで。

サンプル

こんな感じです。
ちなみに、toyotaのサイトのが自分のとそっくりの動作しますが、一応、パクってはいません。(；^ω^)

*1:z-indexで下位のdiv要素のテキストが見える様に、cssで予め、テキストボックスの透明度(opacity)を調整しておく。