首页 > 技术文章 > placehoder兼容

serene92 2015-05-10 10:35 原文

<!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>

function inputIeplaceholder(objInput,focusC,blurC){
var doc = document,
inputs = doc.getElementById(objInput),
//inputs = doc.getElementsByClassName(objInput),
supportPlaceholder = 'placeholder' in doc.createElement('input'),
placeholder = function(input) {
var text = input.getAttribute('placeholder'),
defaultValue = input.defaultValue;
if (defaultValue == '') {
input.value = text;
input.style.color = '#'+blurC;
}
input.onfocus = function() {
if (input.value === text) {
this.value = '';
this.style.color = '#'+focusC;
}
};
input.onblur = function() {
if (input.value === '') {
this.value = text;
this.style.color = '#'+blurC;
}
}
};
if (!supportPlaceholder) {

var text = inputs.getAttribute('placeholder');
if (text) {
placeholder(inputs);
}
}
}


推荐阅读