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

2018/03/23更新 カテゴリー:開発奮闘記 タグ: , ,
  • このエントリーをはてなブックマークに追加

placeholderとは、検索フォームなどでよくみるアレのこと。何も入力されていない時に、テキストフォームにうっすら文字でアナウンスすることができます。これはinputタグにplaceholderを記述するだけで使えるようになりますが、古いブラウザでは使えません。

SPONSOR

placeholder

placeholderの使い方はかんたんで、inputタグにplaceholderを入れるだけ。

<input type="text" placeholder="検索キーワードを入れてくださいね">

そうすると、このように何も入力されていないとメッセージが浮かび上がります。
placeholder

対応していないブラウザ

うっすら気づいている人も多いと思いますが、やっぱりIEでした。
ブラウザ

SPONSOR

便利な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に対応しているブラウザはそのままの挙動になり、対応していないブラウザでも動くようになります。

フリーランスエンジニアの稼ぎ方

  • このエントリーをはてなブックマークに追加
SPONSOR

PROFILE

プロフィール

入江 慎吾/サービス開発だけで生きていく
自分のサービスだけで自由に生きる。勢いで受託開発をすべてやめて、サービスだけ作って生きていくことを決めたフリーのエンジニア。得意を教えて副業にできるMENTAを開発中! (詳しいプロフィール)
WEBサービス・アプリ開発に役立つ情報をイリテクの入江がお届けします。プログラミング、UI/UXデザイン、SNS・ブログマーケティングなど、プロダクト開発だけで自由に生きていくための実践的な情報を配信しています。

PRODUCT

イリテクで開発したプロダクト

RELATION

関連する記事

SPONSOR

TAG

タグから記事をさがす