ie下不支持placeholder 用jquery來完成兼容


這是我的第一個博客,還是寫點正經的,希望對做前端朋友有所幫助。
最近在做的項目placeholder不兼容ie,這個可以兼容IE的輸入框的HTML新增的placeholder的顯示
下面是代碼:
$( document ).ready( function()
{
//ie下placeholder的兼容
function isPlaceholder(){
var input = document.createElement('input');
return 'placeholder' in input;
}

if (!isPlaceholder()) {//不支持placeholder 用jquery來完成
$(document).ready(function() {
if(!isPlaceholder()){
$("input").not("input[type='password']").each(//把input綁定事件 排除password框
function(){
if($(this).val()=="" && $(this).attr("placeholder")!=""){
$(this).val($(this).attr("placeholder"));
$(this ).css("color","gray");
$(this).focus(function(){
if($(this).val()==$(this).attr("placeholder")) $(this).val("");
});
$(this).blur(function(){
if($(this).val()=="") $(this).val($(this).attr("placeholder"));
});
}
});
//對password框的特殊處理1.創建一個text框 2獲取焦點和失去焦點的時候切換
var pwdField = $("input[type=password]");
var pwdVal = pwdField.attr('placeholder');
pwdField.after('<input id="pwdPlaceholder" type="text" value='+pwdVal+' autocomplete="off" />');
var pwdPlaceholder = $('#pwdPlaceholder');
pwdPlaceholder.show();
pwdPlaceholder.css("border","none");//樣式改變
pwdPlaceholder.css("color","gray");
pwdField.hide();

pwdPlaceholder.focus(function(){
pwdPlaceholder.hide();
pwdField.show();
pwdField.focus();
});

pwdField.blur(function(){
if(pwdField.val() == '') {
pwdPlaceholder.show();
pwdField.hide();
}
});

}
});

}
});

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com