placeHolder随想

html 5のplaceholderプロパティ機能は使いやすく、フォーム要素にtipを追加することができます.通常は以前はjsを使っていましたが、今では一部のブラウザがjsの悩みから抜け出しています.
例:

<input type="text" placeholder="      tip" />

上にはdemoがあり、この属性をサポートするブラウザでchromeのような効果が見られますが、ieシリーズは全滅し、IE 9にもなります.
では、このプロパティをサポートしていないブラウザではどのように実現しますか?
Googleが出した多くのチュートリアルは簡単なjsを使っています.

placeholder : function(placeholderClassName, attributeName) {  
      $("input").each(function() {  
        var $this = $(this);  
        if ($this.attr(attributeName) != undefined) {  
          // deactivate placeholder  
          $this.focus(function() {  
            if ($this.val() == $this.attr(attributeName)) {  
              $this.removeClass(placeholderClassName);  
              $this.val("");  
            }  
          });  
          // activate placeholder  
          $this.blur(function() {  
            if ($this.val() == "") {  
              $this.addClass(placeholderClassName);  
              $this.val($this.attr(attributeName));  
            }  
          });  
          // initialize placeholder  
          $this.blur();  
        }  
      });  
    } 

もちろんこれはjqueyに基づいています.原理は大体:
1、初期化時にplaceholder属性の値をvalueに記入する
2、focus時にvalueの値を削除
3、blurの場合記入した値が空であればplaceholderの値を記入する
 
しかし、このような処理にはいくつかの問題があります.
1、初期化時にフォームがデフォルト値で上書きされる場合
2、フォーム提出はplaceholderの値を提出する
3、reset時に処理しなかった
 
labelを使用してより良い方法で実現することができます.

<div style="position: relative;" class="placeholder">
  <label>  ，            </label>
  <textarea id="guestbook" name="guestbook" placeholder="  ，            "></textarea>
</div>

もちろんhtml 5との互換性を保つためには、外部のlabelとdivはjsを使用して動的に作成する必要があります.
kissy実装:

KISSY.add('util/placeholder', function(S) {

    var D = S.DOM, E = S.Event;
    /**
     * config{
     *  el：{HtmlElement}      
     *  wrap: {Boolean} default true          
     * }
     *
     *       ：
     * 1、html5 placeholder  
     * 2、        
     */
    function placeholder(el, cfg) {
        var isSupport = "placeholder" in document.createElement("input"),
            self = this;
        //  html5 placeHolder  
        if(isSupport) return;

        var defaultCfg = {
            wrap:true
        };

        if(self instanceof placeholder) {
            var config = S.merge(defaultCfg, cfg);
            self._init(el, config);
        } else {
            return new placeholder(el, cfg);
        }
    }

    S.augment(placeholder, {
        _init:function(target, cfg) {
            var self = this;

            if(!target) {
                S.log('[placeholder] has no target to decorate');
            }

            target = S.one(target);

            var placeHolderTip = target.attr('placeholder');

            if(!placeHolderTip) return;

            self._decorate = function() {
                //    label
                var triggerLabel = self.triggerLabel = D.create(S.substitute('<label style="display: none">{tip}</label>', {
                    tip:placeHolderTip
                }));

                if(target.attr('id')) {
                    D.attr(triggerLabel, 'for', target.attr('id'));
                } else {
                    S.one(triggerLabel).on('click', function() {
                        target[0].focus();
                    });
                }

                //create parent
                if(cfg.wrap) {
                    var targetBox = D.create('<div class="placeholder" style="position: relative"></div>');
                    S.one(targetBox).appendTo(target.parent()).append(target);
                }

                //insertbefore target
                D.insertBefore(triggerLabel, target);

                //judge value && init form reset
                S.later(function() {
                    if(!target.val()) {
                        D.show(triggerLabel);
                    }
                }, 100);
            };

            target.on('focus', function(ev) {
                D.hide(self.triggerLabel);
            });

            target.on('blur', function(ev) {
                if(!target.val()) {
                    D.show(self.triggerLabel);
                }
            });

            self._decorate();

        },
        /**
         *     tip  
         * @param newTip
         */
        text:function(newTip) {
            D.text(this.triggerLabel, newTip);
        }
    });

    //1.1.6 support
    S.namespace("Util");
    S.Util.placeholder = placeholder;

    return placeholder;
});

reset処理はできないようです.の汗.