HTML5のplaceholder属性をjQueryでやってみる

追記：HTML5のplaceholder属性を代替するjQueryプラグイン(ah-placeholder.js)

ここと同じ内容のことをjQueryプラグインの体裁に整えたものを，GitHubで公開してます．詳しくは上の記事をご参照のこと．

placeholder属性

4.10.7.2 Common input element attributes — HTML5 (including next generation additions still in development)

HTML5のinput要素には、placeholder属性があります。input要素に、placeholder属性でテキストを書くと、下のような感じの表現が可能になります。今のところOpera・Safari・Chromeでは、ネイティブに記述しても解釈してくれるようです。

ただし、XHTML 1.1や、HTML 4.01のDTDを宣言した状態で、placeholder属性を書くと、ValidなHTMLにならないので注意が必要です。

で、代替になるスクリプトかいてみた

最近すこしずつJavascript、もといjQueryが書けるようになってきたので、代替スクリプトを書いてみました。上のサンプルもそのスクリプトで疑似再現しています。

classでjs-placeholderと付ければ動作します。title属性の中身を、placeholder属性として代用しています。

$('.js-placeholder').each(function ( )
{
    (function ( elm )
    {
        // placeholder時の文字色を設定
        var defaultColor    = 'silver';
       
        // title属性をplaceholder用の文字列として保持
        $.data(elm, 'placeholder-string', $(elm).attr('title'));

        // 元の文字色を保持 => 入力があったら戻します
        $.data(elm, 'placeholder-color', $(elm).css('color'));
   
        switch ( $(elm).val() ) {
            case '' :
                $(elm).val($.data(elm, 'placeholder-string'));
            case $.data(elm, 'placeholder-string') :
                $(elm).css('color', defaultColor);
            break;
        }
        // フォーカスされたときに、placeholderを消して色を戻す
        $(elm).focus(function ( )
        {
            if ( $(this).val() == $.data(this, 'placeholder-string') ) {
                $(this).val('');
                $(this).css('color', $.data(this, 'placeholder-color'));
            }
        });
        // フォーカスが外れたときに、valueがカラならplaceholderを代入
        $(elm).blur(function ( )
        {
            if ( $(this).val() == '' ) {
                $(this).val($.data(this, 'placeholder-string'));
                $(this).css('color', defaultColor);
            }
        });
        // フォームのsubmit時に、placeholderのままなら消してから送る
        $(elm).parents().filter('form').submit(function ( )
        {
            if ( $(elm).val() == $.data(elm, 'placeholder-string') ) {
                $(elm).val('');
            }
            return true;
        });
    })( this )
});

依存関係は、jQuery1.2.6と1.4.2で、動作を確認しています。$.data()が便利でした。colorはともかく、title属性は普通に、$(elm).attr('title')で良いのですが発見を記念して$.data()を使ってみています。

placeholder - 結構便利で、好きな表現です

このplaceholderの表現が結構好きで、管理ページやフォームを作り込みたいときは、積極的に組み込んでいます。作る側の自己満足ですが、作り込んでる感が結構違いますしね。

入力例とかはplaceholderじゃなくて、普通にinput要素の外というか、横にでも書いたほうがいいんだろうなぁ、と思ったり。例は入力しながら見れないと意味ないですから。使いすぎは注意なのです。

そういえば学生の頃に、技能五輪に参加したときも、見よう見まねでplaceholder的な挙動のモノ作ったなー。JSもASも大分遠のいてましたが、JSのほうはこれから積極的に書いてみたいと思います。

HTML5のAPIとのカラミもあるので。とかいいつつ、たぶん次は、Twitterの@anywhere方面です。

---