HTML5 placeholder JS模拟

支援HTML5 的浏覽器：IE9+，FF4,chrome可以直接使用文本元素的placeholder來确定提示文案，但是IE8以下等浏覽器卻沒有這個選項，下面通過JS來進行模拟，
模拟有兩種方法1、通過元素的value屬性(這種方法的缺點是表單送出時會把提示文案誤認為真正的值) 2、通過label标簽 ，這段代碼是網絡上的，模拟label實作，
原生JS支援，感覺比較好，這裡做個記錄。。

<script type="text/javascript">
    function(){
        var funPlaceholder = function(element) {
            //檢測是否需要模拟placeholder
            var placeholder = '';
            if (element && !("placeholder" in document.createElement("input")) && (placeholder = element.getAttribute("placeholder"))) {
                //目前文本控件是否有id, 沒有則建立
                var idLabel = element.id ;
                if (!idLabel) {
                    idLabel = "placeholder_" + new Date().getTime();
                    element.id = idLabel;
                }

                //建立label元素
                var eleLabel = document.createElement("label");
                eleLabel.htmlFor = idLabel;
                eleLabel.style.position = "absolute";
                //根據文本框實際尺寸修改這裡的margin值
                eleLabel.style.margin = "2px 0 0 3px";
                eleLabel.style.color = "graytext";
                eleLabel.style.cursor = "text";
                //插入建立的label元素節點
                element.parentNode.insertBefore(eleLabel, element);
                //事件
                element.onfocus = function() {
                    eleLabel.innerHTML = "";
                };
                element.onblur = function() {
                    if (this.value === "") {
                        eleLabel.innerHTML = placeholder;
                    }
                    //checkValue(this);
                };

                //樣式初始化
                if (element.value === "") {
                    eleLabel.innerHTML = placeholder;
                }
            }
        };
        funPlaceholder(document.getElementsByName("province")[0]);
        funPlaceholder(document.getElementsByName("subBankName")[0]);
        funPlaceholder(document.getElementsByName("city")[0]);
    }();
</script>