**昨天后臺小哥哥提到placehold無法顯示問題，我這邊總結一下，順便寫個小文章分享給大家。。**
==============================================
一、解決ie9以下input 無placeholder問題
解決方案一：jquery實現
-
當瀏覽器不支持placeholder屬性時，克隆一個和界面相同的input框，將placeholder的值設置爲其value值，覆蓋在界面input框所在位置，並將界面上的input隱藏掉
調用方法：$(#selector).placeholder();(selector泛指css 的 id選擇器) - 當文本框type=password時，引用此placeholder方案會使暗文密碼變成明文密碼
-
如果input文本框使用了bootstrap 行高會高一點，要修改placeholder內的文字樣式 可在placeholder.js裏<span></span>中添加style屬性如：
<span style="font-size: 13px;padding-top: 8px;"></span>如果是普通的input 則無需添加style屬性，
提取demo 鏈接：https://pan.baidu.com/s/1AMl6... 密碼：zs9c
解決方案二： js/jQuery實現
- 實現思路：
1、首先判斷瀏覽器是否支持placeholder屬性，如果不支持則使用模擬placeholder
2、創建一個label標籤：<label>密碼</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));
二、解決placeholder在ios上的小坑
- 在蘋果高版本iPhone6、7 上發現了一個問題,當設置placeholder顯示的字體大小的時候,會被遮擋掉一部分
解決方法:先設置input 裏面的字體大小需要大於placeholder的字體大小
三、讓 placeholder 換行
- 在input 裏面很少用到,input就只有一行而已,多行的話就會使用textarea標籤,確實在textarea標籤裏面如何讓placeholder換行是一個麻煩事,由於不同瀏覽器兼容性還不一樣. 這裏提供一個簡單的實現方法
jq_watermark,一個基於jQuery的小插件,min版本才2.8KB 使用方式 導入jQuery,導入jq_watermark,
jq_watermark在github上的下載地址 給textarea 加上名爲 jq_watermark 的class
<textarea name="" class="jq_watermark" cols="110" rows="10" required placeholder="第一行<br/>第二行<br/>第三行"></textarea>
原文鏈接：https://blog.csdn.net/qq_2959...
三、解決 placeholder 兼容性之修改樣式
::-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;