2011/02/02

テキストボックスのデフォルト値を付けたり／消したりする

仕事でテキストボックスのデフォルト値を書き換えるスクリプトを書くことになったので書いてみました。
5分ほど悩んで、やっぱ楽したい！と思ったので、クロージャで実装しました。

こんな感じのコードがあったときに

<form method="GET">
   <input type="text" name="hogeNm" id="input" value="" />
   <input type="submit" value="submit" />
  </form>
  <button onclick="ORE.toggle(document.getElementById('input'));">GO</button>


こんな感じのスクリプトを書いてみる。

var ORE = function($) {
   var _mes = "デフォルトバリュー";
   var hoge = document.getElementById("input");
   $.onsubmit = function() {
    if (hoge.value == _mes || hoge.value == "") {
     hoge.value = "同じじゃねーか";
    }
   };
   
   // フラグが立っていたらイベントをバインド
   var bind = function(e) {
    e.onfocus = function() {
     if (e.value == _mes) {
      e.value = "";
     }
    };
    e.onblur = function() {
     if (e.value == "") {
      e.value = _mes;
     }
    };
    return false;
   }
   
   // フラグが立っていなかったらイベントをアンバインド
   var unbind = function(e) {
    // この関数内でアンバインドしたいイベントにundefinedとかをセットする。
    // e.onblur = undefinedとか。void(0)でもいいかも。
    // とりあえず、アンバインドされたらアラートを出す処理をいれておきます。
    e.onfocus = function() {
     alert("アンバインドされた");
    };
    e.onblur = function() {
     alert("アンバインドされた");
    };
    return true;
   }
   
   return {
   // OREのメソッドとして関数を定義しときます。
   toggle: function () {
     var flg = true;
     return function(e) {
      hoge.value = _mes;
      flg = flg ? bind(e) : unbind(e);
     };
    }()
   };
  }(window);

一応、OREっていう変数を通してグローバル変数を汚さないようにしたつもりです。
chromeでprofilesを測定しましたが、functionをグローバルで定義しているよりもメモリ効率良く、処理回数も少ないみたいです（？）。だいぶ適当ですが。


書いてて思ったことが２つ。
1つ目は、クロージャーって楽だなと。
楽ばっかりしてると脳みそがふやけそう。
なので、たまにはゴリゴリ系ソース（フラグを沢山使って、配列とかグルグルするソース）を書かないといけないな、と思いました。

2つ目は、jQueryの恩恵に預かろうってことです。
jQueryでこのソースを書けば、きっと３分の１くらいになるんじゃないかなと思います。




けど、まぁ、ちょっとくらいならクロージャもありかなと思ったりしています。
Labels: