JavaScript でプレースホルダ、の続き

2009-03-20 16:38

前々回の JavaScript でプレースホルダつき入力欄を作る の続き。バグを直してテストを足したものを GitHub に置いてみた。

バグ修正

まずはコメントで教えてもらったバグのはなしから。

これを本気でやるなら、親をたどってform要素のonsubmitもフックしないといけなくなるんですけど
このブログのUIだとfocusなしで検索することができないようになってるんですね。

前回の実装には、なにも入力していないときに submit ボタンをクリックすると、プレースホルダとして表示されている値がそのままサーバーに送信されてしまうという問題があった。今回はコンストラクタ (initialize メソッド) に以下のようなコードを足して修正している。

        var form = TextField.formOf(element);
        if (! form) {
            return;
        }
        $(form).observe('submit', function () {
            if (! this._changed) {
                this._element.value = '';
            }
        }.bindAsEventListener(this));

テスト

だんだんコードがいりくんで来たのでテストも書いてみた。テストフレームワークには UnittestJS を使っている。前述の submit や WebKit 対策の unload では、テストが走っているページの中に一段 iframe をきって、そこで遷移をともなうテストを走らせている。

他の選択肢: jQuery と HTML 5

jQuery で、というのを書いたひとは多かった。

なお HTML 5 では、こういうものをいちいち JavaScript で書かなくて良くなるらしい。

はてなブックマーク - vantguarde - 2009年3月8日

それplaceholder属性でできるよ http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#the-placeholder-attribute

知りませんでした。

Leave a Reply