HTML5のplaceholderを対応していないブラウザでも使いたい

placeholderとは、検索フォームなどでよくみるアレのこと。何も入力されていない時に、テキストフォームにうっすら文字でアナウンスすることができます。これはinputタグにplaceholderを記述するだけで使えるようになりますが、古いブラウザでは使えません。
目次
placeholder
placeholderの使い方はかんたんで、inputタグにplaceholderを入れるだけ。
<input type="text" placeholder="検索キーワードを入れてくださいね">
そうすると、このように何も入力されていないとメッセージが浮かび上がります。
対応していないブラウザ
うっすら気づいている人も多いと思いますが、やっぱりIEでした。
便利なjQueryプラグイン「ah-placeholder.js」
ah-placeholder.jsをダウンロードして、読み込みます。
<script src="jquery.js" type="text/javascript" charset="utf-8"></script> <script src="jquery.ah-placeholder.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function() { $('[placeholder]').ahPlaceholder({ placeholderColor : '#666', placeholderAttr : 'placeholder', likeApple : false }); }); </script> </head> <body> <form action="" method="get"> <input type="text" name="string" value="" placeholder="プレースホルダーテキスト" /> <input type="submit" name="submit" value="送信" /> </form> </body>
このようにするだけで、placeholderに対応しているブラウザはそのままの挙動になり、対応していないブラウザでも動くようになります。
[sc name=”engeneer”]
SHARE
無料メルマガ<特典付き>
個人開発・ビジネスについての有益な情報を無料メルマガでお届けします。
個人開発のスキルアップにMENTA
MENTAはいろんなプロに相談できるNo1メンターサービスです。
僕自身もプロダクトの壁打ち・相談にのっています。個人開発でもコードレビュー、セキュリティ面のチェック、デザイン、広告、コンテンツマーケ、SNS集客について相談する、など使えます。
YouTubeでも個人開発ノウハウを発信中!
PROFILE

入江 慎吾
あらゆるスキルが学べるパーソナルメンターサービスMENTAの代表/個人開発が好きでこれまでに30個ほどのWEBサービスやアプリを作ってきました/福岡のWEB制作会社勤務→フリーランスエンジニア→法人立ち上げ→M&A億単位の売却を経験。 (詳しいプロフィール)
あらゆるスキルが学べるパーソナルメンターサービスMENTAの代表/個人開発が好きでこれまでに30個ほどのWEBサービスやアプリを作ってきました/福岡のWEB制作会社勤務→フリーランスエンジニア→法人立ち上げ→M&A億単位の売却を経験。 (詳しいプロフィール)