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

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

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

解決方案一：jquery實現

當瀏覽器不支持placeholder屬性時，克隆一個和界面相同的input框，將placeholder的值設置為其value值，覆蓋在界面input框所在位置，并將界面上的input隱藏掉
調用方法：

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

當文本框type=password時，引用此placeholder方案會使暗文密碼變成明文密碼

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

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

解決方案二： js/jQuery實現

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

  (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 上發現了一個問題,當設置placeholder顯示的字體大小的時候,會被遮擋掉一部分

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

在input 里面很少用到,input就只有一行而已,多行的話就會使用textarea標簽,確實在textarea標簽里面如何讓placeholder換行是一個麻煩事,由于不同瀏覽器兼容性還不一樣. 這里提供一個簡單的實現方法
jq_watermark,一個基于jQuery的小插件,min版本才2.8KB 使用方式 導入jQuery,導入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;
}

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