フォーカスを当てるとデフォルト文字列が消えるinput text (jQuery編)

いろんな文献を気軽に参照しにくい環境になり、いちいち検索しなくてもいいようにここにまとめておきたい感じになったのでしばらくそんな普段書かないようなPOSTばかりします。

まず、最近良くある、デフォルトの状態では入力例を表示して、フォーカスを合わせると消えるというインプットボックスの実装例について。このブログのコメント入力フォームがまさにそんな感じ。

HTML:

<form action="hoge.php" method="get">
<p><input type="text" name="q" id="q" size="30" value="検索語を入力してください"><input type="submit" value="検索"></p>
</form>

JavaScript(jQuery):

$(function(){
    $("#q").focus(function() {
        if($(this).val() == $(this).attr('defaultValue'))
            $(this).val('');
    }).blur(function() {
        if(jQuery.trim($(this).val()) == "") {
            $(this).val($(this).attr('defaultValue'));
        }
    });
});

$(this) を3度実行するのは勿体無いので最初に var $this = $(this) して $this を使い回すとか。/ もしくは if ( this.value == this.defaultValue ) this.value = '' でもよさそう。

確かに、このthisはわざわざjQueryオブジェクトにしなくても、そのままDOMのプロパティを参照すれば用が足りますね。このネタそのものが、単体だとわざわざjQueryを使うまでもないレベルですけど。

実例:

フォーカスがあたったときにvalue属性の値がdefaultvalueだったら消して、逆にフォーカスが外れたときに値が空文字列だったらdefaultvalueを表示するというだけ。このdefaultvalueという属性、どうやら仕様書のいうinitial valueを取得するためにW3C DOMのHTMLInputElementで定義されているもので、ちゃんとW3C DOMを実装しているブラウザならちゃんと使えそう。

デフォルト文字を薄くして実際に入力させるときは黒にしたいというときは、あらかじめCSSで#q{color: #999;}などとした上で、

$(function(){
    $("#q").focus(function() {
        if($(this).val() == $(this).attr('defaultValue'))
            $(this).css('color', '#000').val('');
    }).blur(function() {
        if(jQuery.trim($(this).val()) == "") {
            $(this).css('color', '#999').val($(this).attr('defaultValue'));
        }
    });
});

みたいにしたらいいと思う。

あと、Eventを指定するときに、clickとかkeypressみたいなデバイスに依存するものはなるべく避けてfocusやblurを使うべきだってばっちゃが言ってた。