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を読み込みます

<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);

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

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

Pocket

Share on Tumblr

設置方法

IEplaceholder.js（ソース本体）

関連記事