html5のplaceholderをIEで再現するjQueryプラグイン

練習で、html5のplaceholder（プレースホルダー）をIEでも再現するためのプラグインを作ってみました。

このように、対応ブラウザ向けの記述だけでIEでもプレースホルダーらしい機能がついた状態になります。

<input type="text" name="name" placeholder="名前を入力して下さい">

試作版ということで、主にこんなところが抜けています

プレースホルダーの内容がフォームより長い場合は、はみ出す
フォームをブロック要素（div）で囲う仕組みなので、どんなレイアウトでも簡単に組み込めるか不明
とりあえず、よくある<table>タグで組んであるフォームでは差し支えなかった…。
スタイルシート部分が決め打ち状態なのでカスタマイズは面倒

jQuery1.7 ＋ IE６，７，８，９で、動いてることを確認しています。
1.7にした深い意味はないし、メジャーバージョンに更新する時は1.6から対応に落とそう。

デモも設置してないし、適当すぎやな。

設置方法

ヘッダでjqueryとIEplaceholder.jsを読み込みます

&lt;script type=&quot;text/javascript&quot; src=&quot;https://www.google.com/jsapi&quot;&gt;&lt;/script&gt;&lt;script type=&quot;text/javascript&quot;&gt;// &lt;![CDATA[<br />
        google.load(&quot;jquery&quot;, &quot;1.7&quot;);</p>
<p>// ]]&gt;&lt;/script&gt;<br />
&lt;script type=&quot;text/javascript&quot; src=&quot;/js/IEplaceholder.js&quot;&gt;&lt;/script&gt;

それより後で、どの要素にIEplaceholderを適用するか指定します。

&lt;script type=&quot;text/javascript&quot;&gt;// &lt;![CDATA[<br />
$(document).ready(function(){<br />
    $(':input').IEplaceholder();<br />
});<br />
// ]]&gt;&lt;/script&gt;

IEplaceholder.js（ソース本体）

(function($){<br />
$.fn.IEplaceholder = function() {<br />
if($.browser.msie){<br />
return this.each(function() {<br />
var obj = $(this);<br />
if(obj.attr('placeholder')) {<br />
var h = obj.outerHeight();<br />
var guideSetText = '&lt;div&gt;&lt;/div&gt;';</p>
<p>obj.css({<br />
'position':'absolute',<br />
'z-index':'1'<br />
}).wrap(guideSetText).<br />
parent('div.guideSet').css({<br />
'position':'relative',<br />
'min-height': h + 'px'<br />
}).append(function(){<br />
return '&lt;span&gt;'+$(this).find(':input[placeholder]').attr('placeholder')+'&lt;/span&gt;'<br />
})<br />
.find('span.note').css({<br />
'padding':'0 3px',<br />
'line-height': '1.8',<br />
'position':'absolute',<br />
'z-index':'2',<br />
'display': function(){return $(this).siblings(':input[placeholder]').val() ? 'none' : 'block'},<br />
'color':'#999'<br />
});</p>
<p>var clickAction = function(){<br />
$(this).hide()<br />
.siblings(':input[placeholder]').focus();<br />
}<br />
obj.siblings('span.note').on('click' ,clickAction);</p>
<p>var blurAction = function(){<br />
if(!$(this).val()) $(this).siblings('span.note').show();<br />
}<br />
obj.on('blur' ,blurAction);</p>
<p>var focusAction = function(){<br />
$(this).siblings('span.note').hide();<br />
}<br />
obj.on('focus' ,focusAction);<br />
}<br />
});<br />
}<br />
};<br />
})(jQuery);

大したソースではないのですが、ご入用の場合は自由に使って下さい。

ただ、損害が出ても当方では責任をお取り致しかねます。
すみませんが、そこだけご了承いただき各自の責任でご使用下さいませ。

設置方法

IEplaceholder.js（ソース本体）

関連記事