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

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

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

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

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

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

jQuery1.7 + IE6,7,8,9で、動いてることを確認しています。
1.7にした深い意味はないし、メジャーバージョンに更新する時は1.6から対応に落とそう。

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

“html5のplaceholderをIEで再現するjQueryプラグイン”の続きを読む

自作jqueryプラグインの最小構成

jQueryプラグインの最小構成をメモ。

(function($){
	$.fn.プラグイン名称 = function() {
		return this.each(function() {
			ここに処理を書く
		});
	};
})(jQuery);

例:上記のプラグインをpに適用するときは、こう書く。

$('p').プラグイン名称();