jQueryでテキストの初期値をフォーカス時に消す方法

jQueryでテキストの初期値をフォーカス時に消すには、
下記タグで実現できる

<ul>
	<li><input type="text" value="ユーザー名" /></li>
	<li><input type="text" value="メールアドレス" /></li>
</ul>
input {
	color: #ccc;
}
input .textFocus {
	color: #333333 !important;
}
jQuery(document).ready(function(){

//  textBox は テキストボックス全てを指定。
var textBox = jQuery("input:text");

//  条件は テキストボックスにフォーカスされたら。
textBox.focus(function(){
	//  class名 "textFocus" を追加。(文字色を濃くする)
	jQuery(this).addClass("textFocus");
	
	//  if条件は HTMLで設定した初期値(value)のままかどうか
	if(this.value == this.defaultValue){
		//  trueなら テキストボックスを 空 にする
		jQuery(this).val('');
	}
//  逆に テキストボックスからフォーカスが失われたとき。
}).blur(function(){

	//  if条件は テキストボックスの数値が 空(0文字)のとき
	if(jQuery(this).val() == ''){
		//  テキストボックスの中身を 元の初期値(value)にする
		//  classも外す(文字色を元の薄い色に戻す)
		jQuery(this).val(this.defaultValue).removeClass("textFocus");
	}
});
	
});

Copyright © All Rights Reserved · Green Hope Theme by Sivan & schiy · Proudly powered by WordPress