jquery.ah-placeholder

概要

HTML5 では、フォームの入力欄にあらかじめテキスト表示しておく placeholder 属性というものが使えます。
しかし、IE7,8,9 はあたりでは、対応していないのですが、jquery.ah-placeholder を使用すると、同様の動きを簡単に実現することが出来ます。

使用方法

以下の配布サイトより、jquery.ah-placeholde.js を取得します。

https://github.com/ahomu/jquery.ah-placeholder/blob/master/jquery.ah-placeholder.js?locale=ja

jquery.ah-placeholder は、jQuery のプラグインなので、jQuery とともに使用します。

 <script type="text/javascript" src="jquery.js">
 <script type="text/javascript" src="jquery.ah-placeholder.js">

起動時に、以下のように設定を行います。

 <script type="text/javascript">
 $(function() {
     $('[placeholder]').ahPlaceholder({
         placeholderColor : 'silver',
         placeholderAttr : 'placeholder',
         likeApple : false
     });
 });
 </script>

あとは、通常の HTML5 対応のブラウザと同様です。
例えば、以下のように使用します。

 <input type="text" name="test1" placeholder="入力してください" />