var JHtml5Input = {
//检测
_check : function(){
//不支持html5 返回true
return !window.applicationCache;
},
//初始化
init : function(tipsClassName,css,inputs){
if(this._check()){
this.fix(tipsClassName,css,inputs);
}
},
//修复
fix : function(tipsClassName,css,inputs){
if(inputs == null || inputs.length == 0)
return;
for(var i = 0; i < inputs.length;i++){
var input = inputs.eq(i);
//添加placeholderId标志做唯一标志
input.attr("placeholderId",new Date().getTime()+"x"+i);
//获取input內补丁
var inputPadding = {
left:input.css("padding-left"),
right:input.css("padding-right"),
bottom:input.css("padding-bottom"),
top:input.css("padding-top")
};
//获取input外补丁
var inputMargin = {
left:input.css("margin-left"),
right:input.css("margin-right"),
bottom:input.css("margin-bottom"),
top:input.css("margin-top")
};
//当是第一个输入框时父元素不用inline-block
var isFirst = input.attr("placeholderId") == input.parent().children(":eq(0)").attr("placeholderId");
//父元素
var spanC = $("<span></span>");
if(!isFirst){
spanC.css("display","inline-block");
}
input.before(spanC);
//获取父容器
//强制输入框居左,否则当输入框没有宽度时候没法和输入框一直位置 ,向左浮动是为了兼容inline-block同时加个父元素
var spanParentCss = {"display":"block","position":"relative", "width":"auto","text-align":"left","float":"left"};
var spanParent = null;
spanParent = $("<span></span>");
spanParent.css(spanParentCss);
spanC.append(spanParent);
spanC.append($("<span style='clear: both;'></span>"));
spanParent.append(input);
//添加tips
var sipp_ = $("<pre></pre>");
//设置tips样式
var sippcss={
"position":"absolute",
"left":"0px",
"top":"0px",
"color":"#b2b2b2",
"height":input.height() == 0 ?"auto":input.height()+"px",
"width":input.width() == 0 ?"auto":input.width()+"px",
"margin-left":inputMargin.left,"margin-right":inputMargin.right,"margin-bottom":inputMargin.bottom,"margin-top":inputMargin.top,
"padding-left":inputPadding.left,"padding-right":inputPadding.right,"padding-bottom":inputPadding.bottom,"padding-top":inputPadding.top
};
if(parseInt(input.css("text-indent")) != 0){
sippcss["text-indent"] = input.css("text-indent");
}else if(parseInt(inputPadding.left) == 0 && parseInt(inputMargin.left) == 0){
sippcss["text-indent"] = input.css("font-size");
}
if(parseInt(input.css("line-height")) != 0){
sippcss["line-height"] = input.css("line-height");
}
if(parseInt(input.css("font-size")) != 0){
sippcss["font-size"] = input.css("font-size");
}
if(input.css("font-family") != ""){
sippcss["font-family"] = input.css("font-family");
}
sipp_.css(sippcss);
if(tipsClassName != null && tipsClassName != ""){
sipp_.addClass(tipsClassName);
}
if(css != null){
sipp_.css(css);
}
//设置提示信息
sipp_.text(input.attr("placeholder"));
//tpis加入文档
input.after(sipp_);
//设置对象引用
sipp_[0]["input"] = input;
input[0]["tips"] = sipp_;
//绑定事件
input.bind("keydown keyup focus blur",function(){
if($(this).val().length > 0){$(this["tips"]).hide();}else{$(this["tips"]).show();}
});
sipp_.click(function(){
$(this["input"]).focus();
});
//如果有数据则隐藏提示
if(input.val().length > 0){
sipp_.hide();
}
}
}
};
$(function(){
JHtml5Input.init(null,null,$('input[placeholder]'));
JHtml5Input.init(null,null,$("textarea[placeholder]"));
});