教程集 > jQuery > jquery 教程 > 正文 js 输入提示框

js 输入提示框

发布时间：2023-12-19 编辑：jiaochengji.com

教程集为您提供js 输入提示框等资源，欢迎您收藏本站，我们将为您提供最新的js 输入提示框资源

提示：您可以先修改部分代码再运行

<!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> js 输入提示框</title>  <style>  	fieldset{ width:300px; padding:20px;}  </style>  <script type="text/javascript">  /*  	*** http://www.111cn.net ***  */  var data_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(); // 初始化  }  data_help.prototype={   	load: function(){  		// 创建一个用于显示提示的DIV并设置样式  		var div = document.createElement('div');  		div.setAttribute('style', 'height:21px; line-height:21px;  background:#fffff6; color:#f33; border:1px solid #ccc; border-top:0; text-indent:3px; position:absolute; visibility:hidden');  		div.style.cssText = 'height:21px; line-height:21px;  background:#fffff6; color:#f33; border:1px solid #ccc; border-top:0; text-indent:3px; 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.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(){ // 隐藏  		this.div.style.visibility = 'hidden';  	},  	inp_chk: function(intkey){ // 格式化日期及提示信息样式 2008-03-20  		if(intKey==37||intKey==39)return; // 左右键不检测  		var date = this.parseDate(intKey); // // 用户输入的日期  		if(!date)return;  		var format = this.format; // 提示字符  		var divide = this.divide;  		var uarr = date.split(divide), farr = format.split(divide) // 字符分组  		var darr = date.split(/\d/); //分隔符组  		var styleH = this.styleH, styleB = this.styleB;  		var y=farr[0], m=farr[1], d=farr[2]; //年月日  		if(uarr[0])y=styleH y.slice(0,uarr[0].length) styleB y.slice(uarr[0].length,y.length);  		if(uarr[1]){  			m=styleH divide m.slice(0,uarr[1].length) styleB m.slice(uarr[1].length,m.length);  		}else{  			darr.length>0?m=styleH divide styleB m:m=divide m;  		}  		if(uarr[2]){  			d=styleH divide d.slice(0,uarr[2].length) styleB d.slice(uarr[2].length,d.length);  		}else{  			darr.length>1?d=styleH divide styleB d:d=divide d;  		}  		this.div.innerHTML= y m d;  	},  	parseDate: function(intKey){ // 格式化日期格式，从别人写的方法里扣来的  		/*  			日期只接受数字字符，并且符合正常日期，比如4月只到30号，错误的部分比如“200A“里的“A”系统将把错误字符删除，如果朋友有好的建议欢迎分享。  		*/  		var date = this.inp.value.replace(/\s/g,'');  		if(intKey==8) return date; // 退格键直接返回  		var divide=this.divide;  		var strDateArray = date.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='';  		isNaN(intYear)?intYear='':intYear=intYear.slice(0,4);  		isNaN(intMonth)?intMonth='':intMonth=intMonth.slice(0,2);  		isNaN(intDay)?intDay='':intDay=intDay.slice(0,2);  		intMonth>12?intMonth=intMonth.slice(0,1):'';  		if(intMonth == 1 || intMonth == 3 || intMonth == 5 || intMonth == 7 || intMonth == 8 || intMonth == 10 || intMonth == 12){  			intDay>31?intDay=intDay.slice(0,1):'';  		}  		if(intMonth == 4 || intMonth == 6 || intMonth == 9 || intMonth == 11){  			intDay.slice>30?intDay=intDay.slice(0,1):'';  		}  		if(intMonth == 2){  			boolLeapYear = false;  			if ((intYear % 100) === 0) {  				if ((intYear % 400) === 0) {  					boolLeapYear = true;  				}  			} else {  				if ((intYear % 4) === 0) {  					boolLeapYear = true;  				}  			}  			if (boolLeapYear) {  				intDay.slice(0,1)>2?intDay='':'';  			} else {  				if (intDay > 28) {  					intDay.slice(0,1)>2?intDay='':intDay>28?intDay='2':'';  				}  			}  		}  		switch(strDateArray.length){  			case 1:  				intYear.length==4?date=date divide:date=intYear;  				break;  			case 2:  				intMonth.length==2?date=intYear divide intMonth divide:date=intYear divide intMonth;  				break;  			default:  				date=intYear divide intMonth divide intDay;  		}  		this.inp.value=date;  		return date;  	}  		  }  window.onload = function(){  	new data_help('birthday', '-');  	new data_help('birthday2', '/');  }  </script>   </head>  <body>  <div>  日期1：<input type="text" id="birthday" /><br/><br /><br />  日期2：<input type="text" id="birthday2" /><br/><br /><br />  </div>  </body>  </html>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：

上一篇：状态栏跑马灯代码

[关闭]

js 输入提示框

最近更新

浏览排行