input PlaceHolder属性浏览器兼容，重点是看这段代码关于 JPlaceHolder类的书写。先上网上扒下来的代码：
var JPlaceHolder = {
//检测
_check: function() {
return ‘placeholder’ in document.createElement(‘input’);
},
//初始化
init: function() {
if (!this._check()) {
this.fix();
}
},
//修复
fix: function() {
jQuery(‘:input[placeholder]’).each(function(index, element) {
var self = $(this),
txt = self.attr(‘placeholder’);
self.wrap($(‘<div></div>’).css({
position: ‘relative’,
zoom: ‘1’,
border: ‘none’,
background: ‘none’,
padding: ‘none’,
margin: ‘none’
}));
var pos = self.position(),
h = self.outerHeight(true),
paddingleft = self.css(‘padding-left’);
var holder = $(‘<span></span>’).text(txt).css({
position: ‘absolute’,
left: pos.left,
top: pos.top,
height: h,
lienHeight: h,
paddingLeft: paddingleft,
color: ‘#aaa’
}).appendTo(self.parent());
self.focusin(function(e) {
holder.hide();
}).focusout(function(e) {
if (!self.val()) {
holder.show();
}
});
holder.click(function(e) {
holder.hide();
self.focus();
});
});
}
};
整段代码用 Object.create() 方法定义了一个 JPlaceHolder类，详情请参考阮一峰的博客http://www.ruanyifeng.com/blog/2012/07/three_ways_to_define_a_javascript_class.html。
调用的时候可以直接调用：JPlaceHolder.init(); 也可以 用Object.create()生成实例，不需要用到new。
var JPlaceHolder1= Object.create( JPlaceHolder );
JPlaceHolder1 .init();
这种方法对类的实现比较简单，但是不能实现私有属性和私有方法，实例对象之间也不能共享数据，对”类”的模拟不够全面。
不过个人感觉以上代码的作用不是为了用对象写法写 JPlaceHolder 类，而是想用对象写法写一个 JPlaceHolder功能模块。
不过按照阮一峰博客里关于模块的对象写法案例的样板：
var module1 = new Object({
_count : 0,
m1 : function (){
//…
},
m2 : function (){
//…
}
});
以上 JPlaceHolder的写法少了 new Object。这一点对于我这个初学者还是比较疑惑的。但是如阮一峰所说，用对象写法写模块跟写类一样，不能做到属性和方法的私有化。我们可以把这段代码改成模块的立即执行模式写法：
var JPlaceHolder = (function(){
var id=10;
//检测
var _check= function() {
return ‘placeholder’ in document.createElement(‘input’);
};
//初始化
var init=function() {
if (!this._check()) {
this.fix();
}
};
//修复
var fix= function() {
jQuery(‘:input[placeholder]’).each(function(index, element) {
var self = $(this),
txt = self.attr(‘placeholder’);
self.wrap($(‘<div></div>’).css({
position: ‘relative’,
zoom: ‘1’,
border: ‘none’,
background: ‘none’,
padding: ‘none’,
margin: ‘none’
}));
var pos = self.position(),
h = self.outerHeight(true),
paddingleft = self.css(‘padding-left’);
var holder = $(‘<span></span>’).text(txt).css({
position: ‘absolute’,
left: pos.left,
top: pos.top,
height: h,
lienHeight: h,
paddingLeft: paddingleft,
color: ‘#aaa’
}).appendTo(self.parent());
self.focusin(function(e) {
holder.hide();
}).focusout(function(e) {
if (!self.val()) {
holder.show();
}
});
holder.click(function(e) {
holder.hide();
self.focus();
});
});
};
return {
_check : _check,
init : init,
fix : fix
};
})();
调用方法不变。
当然，以上都是我照葫芦画瓢不成熟的见解，还请大牛批评指正。
未经允许不得转载：前端撸码笔记 » input PlaceHolder属性浏览器兼容