摘要：昨天后臺(tái)小哥哥提到無法顯示問題，我這邊總結(jié)一下，順便寫個(gè)小文章分享給大家。。

**昨天后臺(tái)小哥哥提到placehold無法顯示問題，我這邊總結(jié)一下，順便寫個(gè)小文章分享給大家。。**

==============================================

解決方案一：jquery實(shí)現(xiàn)

當(dāng)瀏覽器不支持placeholder屬性時(shí)，克隆一個(gè)和界面相同的input框，將placeholder的值設(shè)置為其value值，覆蓋在界面input框所在位置，并將界面上的input隱藏掉
調(diào)用方法：

 $(#selector).placeholder();(selector泛指css 的 id選擇器)
 

當(dāng)文本框type=password時(shí)，引用此placeholder方案會(huì)使暗文密碼變成明文密碼

如果input文本框使用了bootstrap 行高會(huì)高一點(diǎn)，要修改placeholder內(nèi)的文字樣式 可在placeholder.js里中添加style屬性如：

如果是普通的input 則無需添加style屬性，

解決方案二： js/jQuery實(shí)現(xiàn)

實(shí)現(xiàn)思路：
1、首先判斷瀏覽器是否支持placeholder屬性，如果不支持則使用模擬placeholder
2、創(chuàng)建一個(gè)label標(biāo)簽：密碼
標(biāo)簽里面的內(nèi)容為所要添加的提示文字，該文字應(yīng)該從對應(yīng)的input|textarea標(biāo)簽取得其placeholder屬性值，再將label標(biāo)簽遮蓋
到所對應(yīng)的input|textarea上
3、代碼實(shí)現(xiàn)如下：

  (function (win) {

    win.isPlaceholer = function () {
        var input = document.createElement("input");
        return "placeholder" in input;
    };
  
    win.placeholder = function () {

        if (!isPlaceholer()) {
            var Placeholder =function (obj) {
                this.input = obj;
                var te = obj.getAttribute("placeholder");
                this.label = document.createElement("label");
                this.label.innerHTML = te;
                this.label.id = obj.id + "Label";
                this.label.style.cssText = "position:absolute; text-indent:4px;color:#999999; font-size:14px;";
                if (obj.value !== "") {
                    this.label.style.display = "none";
                }
                this.init();
            };
            Placeholder.prototype = {

                getxy: function (obj) {
                    var left, top;
                    if (document.documentElement.getBoundingClientRect) {
                        var html = document.documentElement,
                        body = document.body,
                        pos = obj.getBoundingClientRect(),
                        st = html.scrollTop || body.scrollTop,
                        sl = html.scrollLeft || body.scrollLeft,
                        ct = html.clientTop || body.clientTop,
                        cl = html.clientLeft || body.clientLeft;
                        left = pos.left + sl - cl;
                        top = pos.top + st - ct;
                    } else {
                        while (obj) {
                            left += obj.offsetLeft;
                            top += obj.offsetTop;
                            obj = obj.offsetParent;
                        }
                    }
                    return {
                        left: left,
                        top: top
                    };
                },

                getwh: function (obj) {
                    return {
                        w: obj.offsetWidth,
                        h: obj.offsetHeight
                    };
                },

                setStyles: function (obj, styles) {
                    for (var p in styles) {
                        obj.style[p] = styles[p] + "px";
                    }
                },
                init: function () {
                    var label = this.label,
                    input = this.input,
                    getXY = this.getxy,
                    xy = this.getxy(input),
                    wh = this.getwh(input);
                    this.setStyles(label, { "width": wh.w, "height": wh.h, "lineHeight": 40, "left": xy.left + 8, "top": xy.top });
                    document.body.appendChild(label);
                    label.onclick = function () {
                        this.style.display = "none";
                        input.focus();
                    };
                    input.onfocus = function () {
                        label.style.display = "none";
                    };
                    input.onblur = function () {
                        if (this.value === "") {
                            label.style.display = "block";
                        }
                    };
                    if (window.attachEvent) {
                        window.attachEvent("onresize", function () {
                            var xy = getXY(input);
                            Placeholder.prototype.setStyles(label, { "left": xy.left + 8, "top": xy.top });
                        });
                    } else {
                        window.addEventListener("resize", function () {
                            var xy = getXY(input);
                            Placeholder.prototype.setStyles(label, { "left": xy.left + 8, "top": xy.top });
                        }, false);
                    }
                }
            };

            var inpColl = $("#Box input:visible");//這里是頁面上要添加placeholder支持的input
            //var inpColl = document.getElementsByTagName("input"),          
            var textColl = document.getElementsByTagName("textarea");//這里是頁面上要添加placeholder支持的textarea
            //var lableArr = $("#Box lable");
            var toArray = function (coll) {
                for (var i = 0, a = [], len = coll.length; i < len; i++) {
                    a[i] = coll[i];
                }
                return a;
            };
            var inpArr = toArray(inpColl),
            textArr = toArray(textColl),

            placeholderArr = inpArr.concat(textArr);
            for (var i = 0; i < placeholderArr.length; i++) {
                if (placeholderArr[i].getAttribute("placeholder") !== null) {

                    new Placeholder(placeholderArr[i]);
                }
            }
        }

    };
}(window));

在蘋果高版本iPhone6、7 上發(fā)現(xiàn)了一個(gè)問題,當(dāng)設(shè)置placeholder顯示的字體大小的時(shí)候,會(huì)被遮擋掉一部分

解決方法:先設(shè)置input 里面的字體大小需要大于placeholder的字體大小

在input 里面很少用到,input就只有一行而已,多行的話就會(huì)使用textarea標(biāo)簽,確實(shí)在textarea標(biāo)簽里面如何讓placeholder換行是一個(gè)麻煩事,由于不同瀏覽器兼容性還不一樣. 這里提供一個(gè)簡單的實(shí)現(xiàn)方法
jq_watermark,一個(gè)基于jQuery的小插件,min版本才2.8KB 使用方式 導(dǎo)入jQuery,導(dǎo)入jq_watermark,
jq_watermark在github上的下載地址 給textarea 加上名為 jq_watermark 的class

原文鏈接：https://blog.csdn.net/qq_2959...

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}

========================================================================