練習で、html5のplaceholder（プレースホルダー）をIEでも再現するためのプラグインを作ってみました。
このように、対応ブラウザ向けの記述だけでIEでもプレースホルダーらしい機能がついた状態になります。
<input type="text" name="name" placeholder="名前を入力して下さい">
試作版ということで、主にこんなところが抜けています
- プレースホルダーの内容がフォームより長い場合は、はみ出す
- フォームをブロック要素（div）で囲う仕組みなので、どんなレイアウトでも簡単に組み込めるか不明
とりあえず、よくある<table>タグで組んであるフォームでは差し支えなかった…。 - スタイルシート部分が決め打ち状態なのでカスタマイズは面倒
jQuery1.7 ＋ IE６，７，８，９で、動いてることを確認しています。
1.7にした深い意味はないし、メジャーバージョンに更新する時は1.6から対応に落とそう。
デモも設置してないし、適当すぎやな。
設置方法
ヘッダでjqueryとIEplaceholder.jsを読み込みます
<script type="text/javascript" src="https://www.google.com/jsapi"></script><script type="text/javascript">// <![CDATA[
google.load("jquery", "1.7");
// ]]></script>
<script type="text/javascript" src="/js/IEplaceholder.js"></script>
それより後で、どの要素にIEplaceholderを適用するか指定します。
<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
$(':input').IEplaceholder();
});
// ]]></script>
IEplaceholder.js（ソース本体）
(function($){
$.fn.IEplaceholder = function() {
if($.browser.msie){
return this.each(function() {
var obj = $(this);
if(obj.attr('placeholder')) {
var h = obj.outerHeight();
var guideSetText = '<div></div>';
obj.css({
'position':'absolute',
'z-index':'1'
}).wrap(guideSetText).
parent('div.guideSet').css({
'position':'relative',
'min-height': h + 'px'
}).append(function(){
return '<span>'+$(this).find(':input[placeholder]').attr('placeholder')+'</span>'
})
.find('span.note').css({
'padding':'0 3px',
'line-height': '1.8',
'position':'absolute',
'z-index':'2',
'display': function(){return $(this).siblings(':input[placeholder]').val() ? 'none' : 'block'},
'color':'#999'
});
var clickAction = function(){
$(this).hide()
.siblings(':input[placeholder]').focus();
}
obj.siblings('span.note').on('click' ,clickAction);
var blurAction = function(){
if(!$(this).val()) $(this).siblings('span.note').show();
}
obj.on('blur' ,blurAction);
var focusAction = function(){
$(this).siblings('span.note').hide();
}
obj.on('focus' ,focusAction);
}
});
}
};
})(jQuery);
大したソースではないのですが、ご入用の場合は自由に使って下さい。
ただ、損害が出ても当方では責任をお取り致しかねます。
すみませんが、そこだけご了承いただき各自の責任でご使用下さいませ。