★゜・。。・゜゜・。。・゜☆ 2011年10月13日 ☆゜・。。・゜゜・。。・゜★
IEでもplaceholderが使えるようにするのにjQueryが便利だった。
全てのブラウザでplaceholderが効くソースを書く必要があったので、その備忘録です。
ありがたやー、ありがたやー、jQueryに感謝です。
本当は「placeholderが使えないブラウザでも」という意味で、
[JS]HTML5の「プレースホルダーテキスト」をスクリプトで実装する旧式と今時の方法 | コリス
のように、「modernizr.js」を使ったほうがより一般化されるのですが、
どうせ該当するのはIE（とIEライクなLunascape、Sleipnirなど）なので、スクリプトの簡略化として「IE以外」としました。
以下、ソース。
簡単にメモしておくと、
で、データを送信する際、valueがニセモノの値を持っているときはそのまま送ってはならないので、処理。
サンプル（入力してください）として、「確認ボタン」で確認するスクリプトを作ってみました。
ありがたやー、ありがたやー、jQueryに感謝です。
本当は「placeholderが使えないブラウザでも」という意味で、
[JS]HTML5の「プレースホルダーテキスト」をスクリプトで実装する旧式と今時の方法 | コリス
のように、「modernizr.js」を使ったほうがより一般化されるのですが、
どうせ該当するのはIE（とIEライクなLunascape、Sleipnirなど）なので、スクリプトの簡略化として「IE以外」としました。
以下、ソース。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
if(navigator.userAgent.toUpperCase().indexOf("MSIE")>-1){
$(function(){
onload=function(){
$("input[type=text]").each(function(){
$(this)
.addClass("IE_placeholder")
.val($(this).attr("placeholder"))
});
}
$("input[type=text]").each(function(){
if($(this).val()==""){
$(this)
.addClass("IE_placeholder")
.val($(this).attr("placeholder"))
};
$(this).focus(function(){
if($(this).attr("class")=="IE_placeholder"){
$(this).val("");
}
$(this).keydown(function(){
$(this).removeClass("IE_placeholder");
});
});
$(this).blur(function(){
if($(this).val()==""){
$(this)
.addClass("IE_placeholder")
.val($(this).attr("placeholder"))
}
});
});
});
}
function confirm(){
var message="";
var answer="";
for(i=0;i<$("span[name='question']").length;i++){
if($("input[type=text]").eq(i).attr("class")=="IE_placeholder"){
answer="[無記入]";
}else{
answer=$("input[type=text]").eq(i).val();
}
message=message+$("span").eq(i).text()+answer+"\n";
}
alert(message);
}
</script>
<style type="text/css">
.IE_placeholder{
color:#ccc;
}
</style>
</head>
<body>
<p>
<span name="question">好きなヴォーカリスト：</span>
<input type="text" value="" placeholder="例）ラッセル・アレン" />
</p>
<p>
<span name="question">好きなギタリスト：</span>
<input type="text" value="" placeholder="例）ジョン・ペトルーシ" />
</p>
<p>
<span name="question">好きな指揮者：</span>
<input type="text" value="" placeholder="例）ゲオルグ・ショルティ" />
</p>
<p>
<input type="button" value="確認" onclick="confirm();" />
</p>
</body>
簡単にメモしておくと、
4行目
jqueryの呼び出し6～38行目
IEなら～8～14行目
初期化。これをしないとF5を押したときに、placeholderでなくなってしまうorz 「戻る」を押したときも初期化してしまうのでやりたくないのですが、、、15～36行目
それぞれの<input type="text" ～ >に対し、16～20行目
入力されていない（valueがnullの）場合は、placeholderの値をvalueに。ただしこの時のvalueは表示用のニセモノなので、判別させるために「IE_placeholder」というクラスを与える。21～28行目
フォーカスがあたったとき、22～24行目
placeholder表示の場合は空欄にして、25～27行目
一旦「IE_placeholder」を解除。29～35行目
フォーカスが外れたとき、30～34行目
やはり無記入だったら31～33行目
また「IE_placeholder」のクラスを与えてinputのvalueにplaceholderの値をで、データを送信する際、valueがニセモノの値を持っているときはそのまま送ってはならないので、処理。
サンプル（入力してください）として、「確認ボタン」で確認するスクリプトを作ってみました。
39～51行目
「確認ボタン」を押したときの処理40～41行目
初期化。42～49行目
入力項目回数だけ繰り返し。eachでも書けそうだけどうまくいかなかったのでforを使いました。43～45行目
(i-1)番目のvalueの値がplaceholderから持ってきた場合のとき、44行目
メッセージ用の値を[無記入]とする。45～47行目
それ以外（valueの値が、入力されたもの）の場合、46行目
そのまんまの値をメッセージ用に使う。48行目
メッセージを作成。50行目
メッセージの表示。53～57行目
placeholderの場合の色の設定。スクリプト内に「$(".IE_placeholder").css("color","#ccc")」と書くとうまくいかなかったのでスタイルシートにしました。サンプル（入力してください）
好きなヴォーカリスト：
好きなギタリスト：
好きな指揮者：
急いで書いたので、間違いがあるかも。
追記）ブログにすると、テンプレート内のタグの兼ね合いで、やはりうまく行きませんでしたorz
面倒くさいのでそのまま放置。→でも気持ち悪いので直しました。
さらに追記）無記入の場合、[無記入]となるのはIEの時だけですね。面倒くさいので放置。6と38行目を消せば良いだけなんですが、、、