提示输入格式
来源:互联网 发布:apache ant 1.9.6下载 编辑:程序博客网 时间:2024/06/06 12:58
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<TITLE> 日期格式限制 ali_xixi.com整理收集 </TITLE>
<style>
input{font-size:12px;}
</style>
<script type="text/javascript">
/*
*** http://www.hansir.cn ***
*/
var date_help = function(inp, divide){
this.inp = document.getElementById(inp);
this.divide = divide;
this.format = 'YYYY'+divide+'MM'+divide+'DD';
//显示字符样式
this.styleH='<span style="font-weight:bold; color:green">';
this.styleB='</span>';
this.load(); // 初始化
}
date_help.prototype={
load: function(){
// 创建一个用于显示提示的DIV并设置样式
var div = document.createElement('div');
div.setAttribute('style', 'height:21px; line-height:21px;font-family:宋体; font-size:13px; letter-spacing:1px; text-align:center; background:#fffff6; color:#f60; border:1px solid #ccc; border-top:0; position:absolute; visibility:hidden');
div.style.cssText = 'height:21px; line-height:21px; font-family:宋体; font-size:13px; letter-spacing:1px; text-align:center; background:#fffff6; color:#f60; border:1px solid #ccc; border-top:0; position:absolute; visibility:hidden';
div.innerHTML = this.format;
this.div = div;
document.body.appendChild(div);
// 设置DIV的位置
var inp = this.inp;
var inpW = inp.offsetWidth, inpH = inp.offsetHeight;
var left = 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';
// 加载输入框事件
var oThis = this;
this.inp.onfocus = function(){
oThis.inp_v.call(oThis);
}
this.inp.onblur = function(){
oThis.inp_h.call(oThis);
}
this.inp.onkeypress = function(e){ //键盘按下事件
e?intKey=e.which:intKey=event.keyCode;
return oThis.inp_press.call(oThis, intKey);
}
this.inp.onkeyup = function(e){
e?intKey=e.which:intKey=event.keyCode;
oThis.inp_chk.call(oThis,intKey);
}
},
inp_v: function(){ // 提示信息显示
this.div.style.visibility = 'visible';
},
inp_h: function(){ // 提示信息显示
if(new RegExp('^//d+'+this.divide+'//d'+this.divide).test(this.inp.value)){ // 月数补0
this.inp.value = this.inp.value.replace(new RegExp('^(//d+'+this.divide+')(//d)(?='+this.divide+')'),'$10$2');
this.parseDate();
this.parseFormat();
}
if(new RegExp('^//d+'+this.divide+'//d+'+this.divide+'//d$').test(this.inp.value)){ // 天数补0
this.inp.value = this.inp.value.replace(/(/d)$/,'0$1');
this.parseDate();
this.parseFormat();
}
this.div.style.visibility = 'hidden';
},
inp_press: function(intKey){ //键键按下事件 只接受数字和分隔符
return (new RegExp('[//d'+this.divide+']').test(String.fromCharCode(intKey)) || (intKey==0||intKey==8));
},
inp_chk: function(intkey){ // 格式化日期及提示信息样式
if(intKey==37||intKey==39)return; // 左右键不检测
this.parseDate(intKey); // 格式化日期
this.parseFormat(); // 格式化提示信息
},
parseDate: function(intKey){ // 格式化日期
var intDate = this.inp.value.replace(//s/g,'');
var divide=this.divide;
var strDateArray = intDate.split(divide);
strDateArray[0]?intYear = strDateArray[0].replace(/^(/d*).*$/,'$1'):intYear='';
strDateArray[1]?intMonth = strDateArray[1].replace(/^(/d*).*$/,'$1'):intMonth='';
strDateArray[2]?intDay = strDateArray[2].replace(/^(/d*).*$/,'$1'):intDay='';
if((intKey==8 || intKey==46) && (!strDateArray[0]||strDateArray[0].length<5)&&(!strDateArray[1] || strDateArray[1].length<3) && (!strDateArray[2]||strDateArray[2].length<3))return intDate; // 退格键检测
isNaN(intYear)?intYear='':intYear=intYear.slice(0,4);
isNaN(intMonth)?intMonth='':intMonth=intMonth.slice(0,2);
isNaN(intDay)?intDay='':intDay=intDay.slice(0,2);
// 判断在修改阶段
if(intYear.length<4 && (intMonth!='' || intDay!='')){
if(strDateArray[1].length<3 && strDateArray[2]<3)return intDate;
}
if(intMonth.length<2 && intDay!=''){
if(strDateArray[0].length<4 && strDateArray[2]<3)return intDate;
}
if(intMonth.slice(0,1)>1)intMonth='0'+intMonth.slice(0,1);
if(intMonth>12){
var m='0'+intMonth.slice(0,1);
var d=intMonth.slice(1,2);
intMonth = m;
if(intDay=='')intDay=d;
}
var intM=Number(intMonth);
if(intM == 1 || intM == 3 || intM == 5 || intM == 7 || intM == 8 || intM == 10 || intM == 12){
if(intDay.slice(0,1)>3)intDay='0'+intDay.slice(0,1);
intDay>31?intDay=intDay.slice(0,1):'';
}
if(intM == 4 || intM == 6 || intM == 9 || intM == 11){
if(intDay.slice(0,1)>3)intDay='0'+intDay.slice(0,1);
parseInt(intDay)>30?intDay=intDay.slice(0,1):'';
}
if(intM == 2){
boolLeapYear = false;
if ((intYear % 100) === 0) {
if ((intYear % 400) === 0) {
boolLeapYear = true;
}
} else {
if ((intYear % 4) === 0) {
boolLeapYear = true;
}
}
if (boolLeapYear) {
if(intDay.slice(0,1)>2)intDay='0'+intDay.slice(0,1);
} else {
if(intDay.slice(0,1)>2)intDay='0'+intDay.slice(0,1);
if (intDay > 28)intDay=intDay.slice(0,1);
}
}
temDate = '';
if(intYear!='')intYear.length==4 ? temDate = intYear + divide : temDate = intYear;
if(intMonth!='')intMonth.length==2 ? temDate = intYear + divide + intMonth + divide : new RegExp('//d+'+divide+'//d+'+divide).test(intDate) ? temDate=intYear+divide+'0'+intMonth+divide:temDate = intYear + divide + intMonth;
if(intDay!='')temDate=intYear+divide+intMonth+divide+intDay;
this.inp.value=temDate;
return temDate;
},
parseFormat: function(){ //格式化提示信息
var intDate = this.inp.value;
if(!intDate){
this.div.innerHTML=this.format;
return;
}
var format = this.format; // 提示字符
var divide = this.divide;
var uarr = intDate.split(divide), farr = format.split(divide) // 用户输入的字符分组
var styleH = this.styleH, styleB = this.styleB;
var y=farr[0], m=farr[1], d=farr[2]; // 年, 月, 日
if(uarr!='')y=styleH+y.slice(0,uarr[0].length)+styleB+y.slice(uarr[0].length,y.length);
if(uarr[1]!='' && uarr[1]!=null){
m=styleH+divide+m.slice(0,uarr[1].length)+styleB+m.slice(uarr[1].length,m.length);
}else{
new RegExp('//d*'+divide).test(intDate)?m=styleH+divide+styleB+m:m=divide+m;
}
if(uarr[2]!=''&&uarr[2]!=null){
d=styleH+divide+d.slice(0,uarr[2].length)+styleB+d.slice(uarr[2].length,d.length);
}else{
new RegExp('//d*?'+divide+'//d*?'+divide).test(intDate)?d=styleH+divide+styleB+d:d=divide+d;
}
this.div.innerHTML= y+m+d;
}
}
window.onload = function(){
new date_help('birthday', '-');
new date_help('birthday2', '/');
}
</script>
</HEAD>
<body>
告诉你一个应有尽有的网页特效网址:<a href="http://js.alixixi.com">http://js.alixixi.com</a>
<hr />
<div>
日期1:<input type="text" id="birthday" /><br/><br /><br />
日期2:<input type="text" id="birthday2" /><br/><br /><br />
</div>
</body>
</html>
- 提示输入格式
- 输入框的日期格式提示效果
- bootstrap输入提示的使用及格式
- 在文本框中提示用户输入内容格式的方法
- 在文本框中提示用户输入内容格式的…
- 提示输入
- Struts2输入校验(二) の 替换原有的错误信息提示格式
- 关于System.Convert.ToInt32(“0.00000000001112”);提示:输入字符串的格式不正确
- silverlight中饼状图使用时提示“输入的字符串格式不正确” 解决办法
- (NumberFormatException数字格式异常)编写一个程序,提示用户读取两个整数,然后显示他们的和。程序应该在输入不正确时提示用户再次输入数字。
- 输入框输入提示代码
- 格式提示文字
- 输入框里有文字提示
- 输入文本自动提示
- 【BAST】提示输入密码
- jQuery输入提示功能
- 输入框提示tip
- Eclipse 输入自动提示
- 被夸大的伊朗“Twitter革命”
- 点击弹出层
- 牛根生百科
- 由进度条内嵌百分比引开的话题
- 表结构设计器(EZDML)升级到版本1.3
- 提示输入格式
- ASP.NET检验控件的汇总
- js 实现 复选框全选与全不选
- 售前工程师如何考虑问题
- 用js屏蔽F1-F12的快捷功能
- 关于批量重命名文件
- 如何迁移邮箱
- js判断浏览器
- 初始LINQ