THE HAM MEDIA BLOG

入力フォームに何を入力していいのか、
あらかじめサンプルを入力しておくのがいいと言われます。

でも、valueとしてあらかじめ文字を入力しておくと、
入力しようとするときにいちいち消す必要があるので面倒です。

なので、最初はサンプル文字をいれておき、
入力部分にフォーカスがいったときにそれを消すスクリプトを作ってみました。

サンプル

◆スクリプト

$(function(){
	$("input").val("キーワードを入力")
	   .css("color","#969696");
	$("input").focus(function(){
		if(this.value == "キーワードを入力"){
			$(this).val("").css("color","#000");
		}
	});
	$("input").blur(function(){
		if(this.value == ""){
			$(this).val("キーワードを入力")
			     .css("color","#969696");
		}
		if(this.value != "キーワードを入力"){
			$(this).css("color","#000");
		}
	});
});

◆プレビュー

上の入力欄になにか入力されるまで同じのが出ます。
最初のサンプルはあくまでサンプルなので、文字を薄めにしておきました。
何か文字を入力すると文字が黒くなります。

「キーワードを入力」と書かれた部分を、
必要に応じて、例や参考などとして変更しておくといいでしょう。