[JavaScript]テキストエリアにtitleタグを使って入力例を表示する

JavaScriptを利用して登録フォームのテキストボックスにtitleタグに指定した文字列を入力例として表示する方法を記します。

この処理は

1. フォーカスが外れたとき
   入力した文字列がないまたは、入力した文字列がtitleタグの入力内容と同じ場合、入力例を表示する
2. フォーカスされている場合
   入力した文字列がtitleタグの入力内容と異なる場合、入力した文字列を通常のフォント色で表示する

という方法で実現します。

実際の動作は下のようになります。

 

名前：
住所：

ソースは以下のようになります。

	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript">
	<!--
	$(document).ready(function() {
	// 入力例のフォント色
	var sampleColor = '#999999';
	// 入力文字のフォント色
	var inputColor = '#000000';
	$('.text')
	// フォーカスを外れたときの動作
	.blur(function(){
	var _$ = $(this);
	if(_$.val() == '' || _$.val() == _$.attr('title')){
	_$.css('color', sampleColor)
	.val(_$.attr('title'));
	}
	})
	// フォーカスされたときの動作
	.focus(function(){
	var _$ = $(this);
	_$.css('color', inputColor);
	if(_$.val()==_$.attr('title')){
	_$.val('');
	}
	})
	.parents().submit(function() {
	// サブミットしたときに、入力例が実際の入力内容として
	// サーバに送信されないようにする。
	$('.text').each(function () {
	// focusイベントに登録した処理を実行するけど、イベントは発生させない
	$(this).triggerHandler("focus");
	});
	$('.message').html('submitしたときは、このように入力例がサーバに送信されないようにします。');
	// この画面はサンプルなので、実際にはsubmitしないようにする。
	return false;
	})
	.end()
	.each(function () {
	// blurイベントに登録した処理を実行するけど、イベントは発生させない
	$(this).triggerHandler("blur");
	})
	});
	// -->
	</script>
	<form style="margin:0px;padding:0px;">
	<div class="message" style="height:1em;font-size:80%;width:250px;margin:0px;padding:0px;">
	&nbsp;
	</div>
	<table>
	<tr>
	<th>名前：</th>
	<td><input type="text" name="name" size="30" maxlength="60" title="サンプル 太郎" class="text name"></td>
	</tr>
	<tr>
	<th>住所：</th>
	<td><input type="text" name="address" size="30" maxlength="60" title="神奈川県横浜市金沢区" class="text address"></td>
	</tr>
	<tr>
	<td colspan="2" style="text-align:center;">
	<input type="submit" name="submit" value="なんちゃってsubmit" style="width:150px;">
	</td>
	</tr>
	</table>
	</form>

view raw 2011-09-javascript.html hosted with ❤ by GitHub

※追伸 >- この投稿が役にたったと思った方は、上か下の広告をクリックしていただけるとうれいいです。