jQueryでプレースホルダーを実装してみる

HTML5ではplaceholder属性が登場して、いとも簡単に実装できてしまうのですが、日本はまだまだIE8以下の勢力が強いので自前で実装する機会が多いと思います。

すでにいろいろな方がライブラリを作って公開しているのですが、せっかくなので自分で実装してみます。

ということで、こんな感じで実装してみました。jquery1.9.1だけ使います。

まずView側

<div class="outer" style="position:relative;">
    <span id="placeholder" style="position:absolute;left:5px;color:#808080;z-index:99;cursor:pointer;">（例）ほげほげ　ふがふが</span>
    <input type="text" id="keyword" name="keyword" value="" size="60" maxlength="50">
</div>

プレースホルダー用の表記をspanタグで作成して、外側のdivタグ基準の絶対位置を指定して、入力欄にいい感じに重なるように表示します。

そしてJS側

$(function(){

// プレースホルダーをクリックしたら入力欄にフォーカス
$('#placeholder').on('click', function(e){
    $('#keyword').focus();
});
$('#keyword').on('focus', function(e){
    // 入力欄にフォーカスが当たったらプレースホルダーを非表示
    if($(this).val()===''){
        $('#placeholder').css('display', 'none');
    }
}).on('blur', function(e){
    // フォーカスが外れて入力値が空だったらプレースホルダー表示
    if($(this).val()===''){
        $('#placeholder').css('display', 'block');
    }
}).on('change', function(e){
    // 内容が変更されて入力値が空だったらプレースホルダー表示（これバインドしなくてもいけると思うけど）
    if($(this).val() === ""){
        $('#placeholder').css('display', 'block');
    }
}).on('keyup', function(e){
    // キーアップを拾って入力値が空ならプレースホルダー表示。入力されていれば非表示
    var _display = ($(this).val() === "")?'block':'none';
    $('#placeholder').css('display', _display);
});

});