読者です 読者をやめる 読者になる 読者になる

もやもやエンジニア

IT系のネタで思ったことや技術系のネタを備忘録的に綴っていきます。フロント率高め。

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);
});

});

そんな難しいことせずにさらっと実装できます。
※最適解では無いと思います。

このレベルならライブラリを探して突っ込むよりも自分で実装した方がオススメです。自由に作れるし、パフォーマンスを気にするのであれば無駄なリクエストは発生させないに超したことはないので。

どこかおかしいところがあれば指摘してくださいな。