実践演習-ガイドテキスト

ガイドテキスト - jQuery基本形

<form method="get" action="http://example.com/">
<input class="guideText" type="text" size="30" value="お名前を入力してください">
<textarea class="guideText" cols="30" rows="8">メッセージを入力してください</textarea>
<input type="submit" value="送信">
</form>
$(function(){
	$('.guideText').each(function(){
		var guideText = this.defaultValue;
		var element = $(this);
		element.focus(function(){
			if(element.val()===guideText){
				element.val('');
				element.removeClass('guide');
			}
		});
		element.blur(function(){
			if(element.val()===''){
				element.val(guideText);
				element.addClass('guide');
			}
		});
		if(element.val()===guideText){
			element.addClass('guide');
		}
	});
});
 * {
  font-family: sans-serif;
}
body{
  padding: 30px;
}
form{
  padding: 0 0 10px;
}
form div{
  padding: 0 0 3px;
}
.guide{
  color: #CCC;
}
textarea{
  display: block;
  width: 300px;
  margin: 5px 0 5px;
}