HTML5 placeholder JS模拟

秒速五厘米 2022-05-22 07:05 155阅读 0赞

支持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>