Re: 「JavaScript の不思議な面白さ」についてのアンサー

アイデア

青山テルマを目標にアンサーコードアンサーソース（笑）
元ネタ： http://techblog.yahoo.co.jp/cat207/how_to/javascript/

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>CCSの不思議な面白さ</title>
		<style type="text/css">
			fieldset#f1,fieldset#f2{
				position:relative;
				border-style:none;
				padding:0;width:20em;
				display:block;
			}
			label#q_label{
				position:absolute;
				font-size:x-small;
				display:block;
				color:gray;
				height:1em;
				left:.8em;top:.6em;
			}
			label#q_label:hover{
				color:#c03;/*おまけ*/
			}
		</style>
		<script type="text/javascript" language="JavaScript">
			function chkf(evt){
					var elem = evt.target;
					label=document.getElementById(elem.id + "_label");
					if (label.htmlFor == elem.id) {
						label.style.display = "none";
					}
			}
			function chkb(evt){
					var elem = evt.target;
					label=document.getElementById(elem.id + "_label");
					if (label.htmlFor == elem.id) {
						if (!elem.value) {
							label.style.display = "block";
						}
					}
			}

		</script>
	</head>
	<body>
		<form id="form1">  
			<fieldset id="f1">
				<label for="q" id="q_label">キーワードを入力してください</label>
				<input name="q" id="q" size="30" type="text"
				 onfocus="chkf(event)" onblur="chkb(event)" value="" /> 
			</fieldset>
			<fieldset id="f2">
				<input type="submit" value="検索"/>  
			</fieldset>
		</form>  
		<p><small>適当でごめんなさい。ねむいのでブラウザ依存とかは調べてないです。<br />
			IE以外の人はこれで満足するんじゃないかと思います、はい。</small></p>
	</body>
</html>


気が向いたら、直してつかおうっと。


直しました(*'∇'*)ゝ

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Javascript and CSS Form Example</title>
		<style type="text/css">
			fieldset#f1{
				position:relative;
				border-style:none;
				padding:0;width:20em;
				display:block;
			}
			label#q_label{
				position:absolute;
				font-size:x-small;
				display:block;
				color:gray;
				height:1em;
				left:.8em;top:.6em;
			}
		</style>
		<script type="text/javascript" language="JavaScript">
			function chkf(evt){
					if (evt.srcElement) {
						var elem = document.getElementById(evt.srcElement.id);
					} else {
						var elem = evt.target;
					}		
					label=document.getElementById(elem.id + "_label");
					if (label.htmlFor == elem.id) {
						label.style.display = "none";
					}
			}
			function chkb(evt){
					if (evt.srcElement) {
						var elem = document.getElementById(evt.srcElement.id);
					} else {
						var elem = evt.target;
					}
					label=document.getElementById(elem.id + "_label");
					if (label.htmlFor == elem.id) {
						if (!elem.value) {
							label.style.display = "block";
						}
					}
			}

		</script>
	</head>
	<body>
		<form>  
			<fieldset id="f1">
				<label for="q" id="q_label">キーワードを入力してください</label>
				<input name="q" id="q" size="30" type="text"
				 onfocus="chkf(event);" onblur="chkb(event);" value="" /> 
			</fieldset>
				<input type="submit" value="検索"/>  
		</form>  
		<p><small>ベタな判定いれて、IE6も確認しました。</small></p>
	</body>
</html>