guide text

ガイドテキスト基本形

htmlソース

?
1
2
3
4
5
6
7
     
<form method="get" action="http://example.com/">
    <input class="guideText guide" size="30" value="お名前を入力してください" type="text">
    <textarea class="guideText guide" cols="30" rows="8">メッセージを入力してください</textarea>
    <input value="送信" type="submit">
</form>
                    

cssソース

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
*{
    font-family:sans-serif;
}
body{
    padding:30px;
}
form{
    padding:0 0 10px;
}
form div{
    padding:0 0 3px;
}
.guide{
    color:#cccccc;
}
textarea{
    display:block;
    width:300px;
    margin:5px 0 5px;
}                      

発展形

変更ポイント

?
1
2
3
4
5
6
7
8
//変更ポイント１ コード内で使用するクラス名を変数化
var guideClass = 'guide';
//変更ポイント２メソッドチェーン使用
    element.val('').removeClass(guideClass);
    element.val(guideText).addClass(guideClass);              
    element.addClass(guideClass);            
            

復習

以前作成した下記の送信フォームに今回学習したガイドテキスト機能を実装してください。

送信フォーム
氏名
メールアドレス
お問い合わせ内容

jqソース

	//ガイドテキスト
	
	//起点のオブジェクトの変数化
	var parts = $('#quest03 dd input,#quest03 dd textarea');
	//ボタンの非表示
	btn_send.hide();



	//オブジェクトへのeachを利用した操作
	parts.each(function(){
	//初期設定
		//テキストボックスの初期値
		var guideText = this.defaultValue;
		//テキストボックスの現在の値
		var valeu = $(this).val();
		//thisオブジェクト
		var input = $(this);
		//リロード対応（更新操作でも初期設定に戻る）
			 jQuery(window).load( function () {
		 			input.val(guideText).addClass('guide');
		    });

	//focus&bluer　イベント時
		input.focus(function(){
			//フォーカス時の条件分岐
			if(input.val()===guideText){
				input.val('');	
				input.removeClass('guide');
			}			
		}).blur(function(){
			//blur時の条件分岐
			if(input.val()===""){
				//未入力の場合
				input.val(guideText)
					.addClass('guide');
					btn_show($('#quest03 dd input'));	
			}else{
			//入力をされた場合
				//ブラーされた要素の値の取得	
				var val = $(this).val();
				//ブラーされた要素のname属性値取得
				var name = $(this).attr('name');
				//ヴァリデート関数その１
				//ヴァリデーションが通った場合は、retにtrueが格納
				var ret =valid(val,name);
					//ヴァリデート関数その２（失敗）
					//var ret = valided(val);
				//メッセージ表示領域の変数化				
				var dd = $(this).parent('dd');

				//ヴァリデート関数が通ったとき			
				if(ret){
					input.val(guideText).addClass('guide');
					//警告メッセージ生成
					var p  = $('<p class="del" />');
					p.text(guideText).appendTo(dd);
					//メッセージがすでにある場合、メッセージが２つ以上表示されないよう１つ↑のの同一要素を削除
					$('p').prev('.del').remove();
					
				}else{
					//メッセージがあった場合は消す。
					dd.find('p').remove();
					//ボタン表示関数
					btn_show($('#quest03 dd input'));	
				}				
			}
		});
		//guideクラスの追加
		if(valeu === guideText){
			input.addClass('guide');			
		}
//ボタン表示関数		
function btn_show(jQob){
	//カウンタ関数設定
	var i=0;
	//引数で渡されたｊＱオブジェクトへのeachでの操作
	jQob.each(function(){
		//未入力だった場合のみカウンタ変数をインクリメント
		if($(this).val()===this.defaultValue) i++;
	});
	//console.log(i);
	//カウンタ変数が0の時（ヴァリデーションが通りかつ未入力の場合）
	if(i === 0){
		//ボタンの表示
		btn_send.show();
	}else{
			btn_send.hide();
	}

	return;
};		

//ヴァリデーション関数その１
function valid(str,name){
	//かな文字入力エリア用条件分岐
	if(name === 'name1' || name === 'name2'){
		if(!str.match(/^[^ -~｡-ﾟ]*$/)){
			btn_send.hide();
			return '全角にて記入してください';	
		}
	}
	//メイル形式入力エリア用条件分岐
	if(name === 'mail'){
		if(!str.match(/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/)){
			btn_send.hide();
			return 'メールアドレスを正しく記入してください。';
		}
		}
		//ヴァリデーションが通らなかった場合はfalseを返す。
		return false;	
	}	
});

//ヴァリデーション関数その２（失敗）

	function valided(str){
//		if(!str.match(/^[^ -~｡-ﾟ]*$/) || !str.match(/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/)){
			if(str.match(/^[^ -~｡-ﾟ]*$/)){
				//var ret = ['全角にて記入してください',1];
				return false;
			}else if(str.match(/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/)){
			//	var ret = ['メールアドレスを正しく記入してください。',2];
				return false;
			}
			return true;
		//}	
	}

上へ