placeholder兼容IE瀏覽器
在做登錄頁(yè)面的過(guò)程中垒探，發(fā)現(xiàn)登錄用戶名密碼提示在IE下不顯示饮焦，其實(shí)就是placeholder不兼容IE。
那要想在IE下顯示提示內(nèi)容該怎么辦呢?
可以通過(guò)給input賦值為placeholder的值即可，而placeholder和value的樣式往往不一樣廓译，只要設(shè)置兩者樣式相同即可埃仪。
我是修改的placeholder樣式：代碼如下：
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #666;
font-size: 20px;
font-weight: bolder;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #666;
font-size: 20px;
font-weight: bolder;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #666;
font-size: 20px;
font-weight: bolder;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #666;
font-size: 20px;
font-weight: bolder;
}
兼容placeholder的js代碼;
// 兼容IE下 placeholder 正常顯示
;(function($){
$.fn.placeholder = function(options){
var opts = $.extend({}, $.fn.placeholder.defaults, options);
var isIE = document.all ? true : false;
return this.each(function(){
var _this = this,
placeholderValue =_this.getAttribute("placeholder"); //緩存默認(rèn)的placeholder值
if(isIE){
_this.setAttribute("value",placeholderValue);
_this.onfocus = function(){
$.trim(_this.value) == placeholderValue ? _this.value = "" : '';
};
_this.onblur = function(){
$.trim(_this.value) == "" ? _this.value = placeholderValue : '';
};
}
});
};
})(jQuery);
使用方法： $('input').placeholder();
需要特別提出的是密碼框的使用：如果直接使用乙濒，密碼框失去焦點(diǎn)時(shí)會(huì)把提示顯示為暗文（也就是 黑點(diǎn)），所以必須借助另外的輸入框顯示卵蛉。
思路：密碼框先設(shè)置隱藏颁股，在密碼框旁邊用一個(gè)普通輸入框，value賦值為提示內(nèi)容傻丝，當(dāng)光標(biāo)進(jìn)入時(shí)把輸入框隱藏甘有，顯示密碼框。當(dāng)光標(biāo)離開(kāi)時(shí)隱藏密碼框葡缰，顯示輸入框進(jìn)行提示亏掀。
密碼還是在密碼框中輸入忱反，輸入框只是充當(dāng)placeholder的作用
html代碼：
<input id="login_showPwd" placeholder="密碼" type="text" value="密碼">
<input autocomplete="off" id="login_password" lay-verify="required" name="password" placeholder="密碼" required style="display: none;" type="password">
js代碼：
<script type="text/javascript">
// 兼容IE下 placeholder 正常顯示
;(function($){
$.fn.placeholder = function(options){
var opts = $.extend({}, $.fn.placeholder.defaults, options);
var isIE = document.all ? true : false;
return this.each(function(){
var _this = this,
placeholderValue =_this.getAttribute("placeholder"); //緩存默認(rèn)的placeholder值
if(isIE){
_this.setAttribute("value",placeholderValue);
_this.onfocus = function(){
$.trim(_this.value) == placeholderValue ? _this.value = "" : '';
};
_this.onblur = function(){
$.trim(_this.value) == "" ? _this.value = placeholderValue : '';
};
}
});
};
})(jQuery);
function isIE(){
var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字符串
return userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判斷是否IE<11瀏覽器
}
if(isIE()){
console.log('isIE');
// 展示框 focus事件，展示框隱藏滤愕，密碼框顯示
$('#login_showPwd').focus(function(){
var text_value = $('#login_showPwd').val();
if(text_value == "密碼"){
$('#login_showPwd').hide();
$('#login_password').show().focus();
$("#login_password").val('')
}
});
// 失去焦點(diǎn)事件
$('#login_password').blur(function(){
var text_value = $('#login_password').val();
if(text_value == ""){
$('#login_showPwd').show();
$('#login_password').hide();
}
})
}else{
$('#login_showPwd').hide();
$('#login_password').show()
}
</script>
中文和數(shù)字不能水平對(duì)齊温算，設(shè)置line-height就可以了。
