(JavaScript)jQueryでテキストボックスに入力ヒントを表示する

最近、入力フォームのテキストボックスに予めヒントの文字列が入っており、フォーカスが入るとヒントが消え、テキストが入力できるようになるみたいなWEBが増えています。

それを jQuery を使って実装してみました。

参考にさせてもらったのは、フォームに入力ヒントを与えるjQuery - YATのBlogと非フォーカス時にヒントの表示されるテキストボックス - jQuery 日本語リファレンスです。

HTML側はこんな感じです。

  method="post" action="Check" id="input">

 type="text"  title="備考を入力。" id="memo" name="memo" class="input_hint">
 type="submit" value="送信">

CSS側

/*ヒント用スタイルシート*/
input.input_hint{
    color:#666666;
}

JavaScript側

$(function(){
    //テキストボックスの値に、title属性に設定しているヒントを表示
    $("#memo").val( $("#memo").attr('title') );
    textFill($('#memo'));

    //フォーカスによって、テキストボックスの値を変えるための関数。
    function textFill(input){ 
        var originalvalue = input.attr('title');
        input.focus( function(){
            //フォーカスが入ったとき
            if( $.trim(input.val()) == originalvalue ){
                //CSSを直接変更するという方法もあるが、今回はヒント用スタイルシートを外す設定に
                input.removeClass("input_hint");
                //値をクリア
                input.val(''); 
            }
        });
        input.blur( function(){
            //フォーカスが外れたとき
            if( $.trim(input.val()) == '' ){
                //値が入力されなかったら再度ヒント表示
                input.val(originalvalue);
                input.addClass("input_hint");
            }
        });
        input.parents('form:first').submit(function(){
            //フォース送信時に、ヒントの内容を送らないようにする
            if(input.val()==input.attr('title')){
                input.triggerHandler('focus');
            }
        }).end()
    }
});