输入框的日期格式提示效果

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<TITLE>NewDocument</TITLE>
<style>
fieldset{width:300px;padding:20px;}
</style>
<scripttype="text/javascript">
vardata_help=function(inp,format){
this.inp=document.getElementById(inp);
this.format=format;
vardiv=document.createElement('div');
div.setAttribute('style','height:21px;font-size:12px;line-height:21px;background:#fffff6;color:#f33;border:1pxsolid#ccc;border-top:0;text-indent:3px;position:absolute;visibility:hidden');
div.style.cssText='height:21px;line-height:21px;font-size:12px;background:#fffff6;color:#f33;border:1pxsolid#ccc;border-top:0;text-indent:3px;position:absolute;visibility:hidden';
div.innerHTML=this.format;
this.div=div;
document.body.appendChild(div);
this.load();
varoThis=this;
this.inp.onfocus=function(){
oThis.inp_v.call(oThis);
}
this.inp.onblur=function(){
oThis.inp_h.call(oThis);
}
this.inp.onkeyup=function(){
oThis.inp_chk.call(oThis);
}
}
data_help.prototype={
load:function(){
varinp=this.inp;
varinpW=inp.offsetWidth,inpH=inp.offsetHeight;
varleft=0,top=0;
while(inp!=null){
left+=inp.offsetLeft;
top+=inp.offsetTop;
inp=inp.offsetParent;
}
this.div.style.height='21px';
this.div.style.width=inpW-2+'px';
this.div.style.left=left+'px';
this.div.style.top=inpH+top+'px';
},
inp_v:function(){
this.div.style.visibility='visible';
},
inp_h:function(){
this.div.style.visibility='hidden';
},
inp_chk:function(){
varp=this.inp.value.replace(/\s/g,'');
varw=this.format;
varn=0;
for(vari=0;i<p.length;i++){
if(/[^a-zA-Z]/.test(w.charAt(i))){
if(p.charAt(i)!=w.charAt(i)){
break;
}
}
n++;
}
this.div.innerHTML='<spanstyle="font-weight:bold;color:green">'+w.slice(0,n)+'</span>'+w.slice(n,w.length);
}
}
window.onload=function(){
newdata_help('birthday','yyyy/mm/dd');
newdata_help('birthday2','yyyy-mm-dd');
}
</script>
</HEAD>
<body>
<div>
日期1:<inputtype="text"id="birthday"/><br/><br/><br/>
日期2:<inputtype="text"id="birthday2"/><br/><br/><br/>
</div>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值