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”]
SPONSER
SHARE
YouTube
PROFILE
