練習で、html5のplaceholder(プレースホルダー)をIEでも再現するためのプラグインを作ってみました。
このように、対応ブラウザ向けの記述だけでIEでもプレースホルダーらしい機能がついた状態になります。
<input type="text" name="name" placeholder="名前を入力して下さい">
試作版ということで、主にこんなところが抜けています
- プレースホルダーの内容がフォームより長い場合は、はみ出す
- フォームをブロック要素(div)で囲う仕組みなので、どんなレイアウトでも簡単に組み込めるか不明
とりあえず、よくある<table>タグで組んであるフォームでは差し支えなかった…。 - スタイルシート部分が決め打ち状態なのでカスタマイズは面倒
jQuery1.7 + IE6,7,8,9で、動いてることを確認しています。
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);
大したソースではないのですが、ご入用の場合は自由に使って下さい。
ただ、損害が出ても当方では責任をお取り致しかねます。
すみませんが、そこだけご了承いただき各自の責任でご使用下さいませ。