以下代码在IE6-9里效果与chrome和FF效果一样。
值更改时placeholder隐藏
/*
* jQuery placeholder
* Fix for Html Input placeholder attribute in IE(6,7,8,9)
* @author Kong
* @Time 2015-02-13
*
* 使用方法 JPlaceHolder.init();
*
*/
var JPlaceHolder = {
//Check if the browser supports placeholder attribute
check: function () {
return ‘placeholder‘ in document.createElement(‘input‘);
},
//initLoad
init: function () {
if (!this.check()) {
this.fix();
}
},
//fix
fix: function () {
jQuery(‘input[placeholder]‘).each(function () {
var input = $(this)
var placeholder = input.attr(‘placeholder‘);
//It was createed,need to return
if (input.parent().find("lable").html() != undefined) {
return;
}
input.wrap($(‘<div></div>‘).css({
‘position‘: ‘relative‘,
‘zoom‘: ‘1‘,
‘border‘: ‘none‘,
‘background‘: ‘none‘,
‘padding‘: ‘none‘,
‘margin‘: ‘none‘
}));
var position = input.position();
var holder = $(‘<lable></lable>‘).text(placeholder).css({
‘position‘: ‘absolute‘,
‘left‘: position.left,
‘top‘: position.top,
‘margin-left‘:‘7px‘,
‘color‘: ‘#aaa‘
}).appendTo(input.parent());
holder.click(function () {
input.focus();
});
//propertychange attribute support IE9
input.die("input propertychange").live("input propertychange", function () {
//input value has change
holder.hide();
}).keyup(function (e) {
if (e.keyCode == 8 && $.trim(input.val()).length == 0) {
holder.show();
}
}).blur(function () {
input.val(delTag(input.val()));
if (!input.val()) {
holder.show();
}
});
});
}
};
//附带去除空格和html标签
//不需要此方法的时候请删除本文档的第61行
function delTag(str) {
var str = str.replace(/<\/?[^>]*>/gim, "");//去掉所有的html标记
var result = str.replace(/(^\s+)|(\s+$)/g, "");//去掉前后空格
return result.replace(/\s/g, "");//去除文章中间空格
}注:IE下如果使用了脚本动态加载input,需要在加载后运行事件。
本文出自 “Kong” 博客,请务必保留此出处http://conrad.blog.51cto.com/1946534/1614677
IE6,IE7,IE8,IE9 placeholder 属性修正
原文:http://conrad.blog.51cto.com/1946534/1614677