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

2012/11/12

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()を使って処理を自作していた方、ぜひお試しください。

ブログ記事の中で広告運用の事例をご紹介することがありますが、実際の事例を一部加工した内容となっておりますのでご留意ください。

また、2018年7月24日よりGoogle AdWordsはGoogle広告に名称変更されました。それ以前の記事に関してはGoogle AdWordsと表記されておりますのでご了承ください。




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

リスティング広告の下請け業務請け負います

リスティング広告お客様実績資料集のご請求

サービス概要ご紹介資料

お問い合わせ