リスティング広告代行の専門会社|Yahoo!プロモーション広告・Google AdWords完全対応|東京・大阪・名古屋

HTML5のplaceholder属性をクロスブラウザ化するjQueryプラグイン


フォームの入力欄に何も入力されていないときに薄い灰色の字でガイドテキストを表示させておく機能を「プレースホルダ」と言います。

このプレースホルダ、HTML5ではinput要素やtextarea要素のplaceholder属性で簡単に設定することができます。

<input type="text" name="mail" placeholder="例)mail@example.com" />

このplaceholder属性を、HTML5に対応していないブラウザでも動作可能にするのが、jQuery-Placeholderです。IE6などでも問題なく動作します。

他のプラグインとの違い

プレースホルダ機能を実現するためのjQueryプラグインは他にも色々と存在しますが、value属性やtitle属性にガイドテキストを設定するものも多いようです。

このようなプラグインを使っていると、将来的に各種ブラウザがHTML5に対応してプラグインを外してよくなったときに、フォーム側を修正する必要が出てきてしまいますね。

jQuery-PlaceholderならHTML5と同じ書式でplaceholder属性が使えるので、不要になったら単純にjQuery-Placeholderの読み込みを外せばOKです。

まとめ

簡単に導入できて、とても便利なプラグインです。今までfocus()やblur()を使って処理を自作していた方、ぜひお試しください。



業界初のリスティング広告運用総合支援ツール Lisket(リスケット)

無料メルマガ

登録はたったの5秒!一週間分のコラムを毎週月曜にメールでお届けします。

Facebookもチェック