jQueryでフォームの入力例をフォーム内に表示させる

●スクリプト

<script type="text/javascript">

$(function(){

var example_postcode = "例）140-0013";

var example_address  = "例）東京都品川区南大井2-12-1-407";

var example_name     = "例）大和賢一郎";

var example_mail     = "例）[e-mail]";

$("form").submit(function(){

var err = 0;

if($("input[name='postcode']").val()=="" || $("input[name='postcode']").val()==example_postcode){

if($("span#postcode").css("color") != "red"){

$("input[name='postcode']").css("border","1px solid red").after("<span id='postcode'> 郵便番号を入力してください</span>");

$("span#postcode").css("color","red");

}

err = 1;

}else{

$("input[name='postcode']").css("border","1px solid gray");

$("span#postcode").text("");

$("span#postcode").css("color","gray");

}

if($("input[name='address']").val()=="" || $("input[name='address']").val()==example_address){

if($("span#address").css("color") != "red"){

$("input[name='address']").css("border","1px solid red").after("<span id='address'> 住所を入力してください</span>");

$("span#address").css("color","red");

}

err = 1;

}else{

$("input[name='address']").css("border","1px solid gray");

$("span#address").text("");

$("span#address").css("color","gray");

}

if($("input[name='name']").val()=="" || $("input[name='name']").val()==example_name){

if($("span#name").css("color") != "red"){

$("input[name='name']").css("border","1px solid red").after("<span id='name'> お名前を入力してください</span>");

$("span#name").css("color","red");

}

err = 1;

}else{

$("input[name='name']").css("border","1px solid gray");

$("span#name").text("");

$("span#name").css("color","gray");

}

if($("input[name='mail']").val()=="" || $("input[name='mail']").val()==example_mail){

if($("span#mail").css("color") != "red"){

$("input[name='mail']").css("border","1px solid red").after("<span id='mail'> メールアドレスを入力してください</span>");

$("span#mail").css("color","red");

}

err = 1;

}else{

$("input[name='mail']").css("border","1px solid gray");

$("span#mail").text("");

$("span#mail").css("color","gray");

}

if(err==1){

return false;

}

}); // end of submit

$("input#name").val(example_name).css("color","#999")

.one("focus",function(){

$(this).val("").css("color","#000")

});

$("input#mail").val(example_mail).css("color","#999")

.one("focus",function(){

$(this).val("").css("color","#000")

});

$("input#postcode").val(example_postcode).css("color","#999")

.one("focus",function(){

$(this).val("").css("color","#000")

});

$("input#address").val(example_address).css("color","#999")

.one("focus",function(){

$(this).val("").css("color","#000")

});

});

</script>

●HTML

<form action="sendmail.php" method="post">

<p>お届け先の郵便番号 <input id="postcode" type="text" name="postcode" /></p>

<p>お届け先のご住所 <input id="address" type="text" name="address" /></p>

<p>お名前 <input id="name" type="text" name="name" /></p>

<p>メールアドレス <input id="mail" type="text" name="mail" /></p>

<input type="submit" value="送信" />

</form>

●CSS

input#postcode{

width:140px;

}

input#address{

width:360px;

}

input#name{

width:200px;

}

input#mail{

width:200px;

}

●解説

jQueryのfocusを使えば、フォーム内に記入例を表示できる。

フォームがフォーカスされたタイミングで記入例が消える。

なお、未入力チェックの処理において、記入例がそのままだと

未入力ではなく入力済みとして認識されるので

それを防ぐために

|| $("input[name='postcode']").val()==example_postcode

を入れている。

サンプルソース

http://tokyo-webs.jp/sample_source/130331c/

東京ウェブ制作