码迷,mamicode.com
首页 > 其他好文 > 详细

placehoder兼容

时间:2015-05-10 11:12:18      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://js.40017.cn/cn/min/??/cn/public/fish.1.4.5.js,/cn/public/fc.1.1.6.js?v=082102" type="text/javascript"></script>

</head>
<body>
<!--<input class="gd_code gdCodeVer" type="text" vtype="rq" vfn="njCodeFn" data-err-rq="专属码不可为空" data-err-fn="请填写正确的专属码" placeholder="请输入您的南京银行专属码"/>-->
<input type="text" id="zy" zy="请输入您的南京银行专属码"/>
</body>
<script>

// fish.admin.config({
// verify: { v: "0.4.1", css: 1, g: 2013011701 }
// });
// function njCodeFn(val,elem){
//
// var newRex = /^[0-9a-zA-Z]{8}$/,
// pass = newRex.test(val);
// if(pass){
// return true;
// }
// else{
// return false;
// }
// }

function isPlaceholder(){
var input= document.createElement(‘input‘);
return ‘placeholder‘ in input;
}

function Placeholder(obj){
this.input = obj;
this.label =document.createElement(‘label‘);
this.label.innerHTML = obj.getAttribute(‘zy‘);
this.label.style.cssText = ‘position:absolute;text-indent:4px;color:#999;font-size:14px;‘
if(obj.value!=‘‘){
this.label.style.display=‘none‘;
}
this.init();

}

Placeholder.prototype = {
getxy:function(obj){
var left,top;
if(document.documentElement.getBoundingClientRect){
var html=document.documentElement,
body=document.body,
pos=obj.getBoundingClientRect(),
st=html.scrollTop || body.scrollTop,
sl=html.scrollLeft || body.scrollLeft,
ct=html.clientTop ||body.clientTop,
cl=html.clientLeft || body.clientLeft;
left = pos.left + sl -cl;
top = pos.top + st -ct;
}else{
while(obj){
left += obj.offsetLeft;
top += obj.offsetTop;
obj = obj.offsetParent;
}
}
return{ left: left, top :top}

},
getwh: function(obj){
return {
w:obj.offsetWidth,
h:obj.offsetHeight
}
},
setStyles:function(obj,styles){
for(var p in styles){
obj.style[p]=styles[p]+‘px‘;
}
},
init:function(){
var label=this.label,
input=this.input,
getXY =this.getxy,
xy=this.getxy(input),
wh=this.getwh(input);
this.setStyles(label,{‘width‘:wh.w,‘height‘:wh.h,‘lineHeight‘:40,‘left‘:xy.left+8,‘top‘:xy.top});
document.body.appendChild(label);
label.onclick = function(){

this.style.display = ‘none‘;

input.focus();

}

input.onfocus = function(){

label.style.display = ‘none‘;

};

input.onblur = function(){

if(this.value == ‘‘){

label.style.display = ‘block‘;

}

};

if(window.attachEvent){
window.attachEvent("onresize",function(){
var xy=getXY(input);
Placeholder.prototype.setStyles(label,{‘left‘:xy.left+8,‘top‘:xy.top});
})
}else{
window.addEventListener("resize",function(){
var xy=getXY(input);
Placeholder.prototype.setStyles(label,{‘left‘:xy.left+8,‘top‘:xy.top});
},false);
}




}


}

new Placeholder(document.getElementById(‘zy‘));






</script>
</html>

placehoder兼容

标签:

原文地址:http://www.cnblogs.com/serene92/p/4491853.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!