jQuery 对input的限制-20130727

程序员文章站 2022-07-12 21:29:24

...

1、效果及功能说明

有三个输入框每个输入框只能输入数字还要限定个数，第一个是年份二是月份三是日期

2、实现原理

我现在值做到了对三个输入框实行数字，和限定字数在后面还有判断2月份呀，一些比较特殊月份的控制，和日期的选定，跟输入框可以输入的数字的限制。

主要的方法

<input id="age" type="text" value="" maxlength=4 onKeypress="if (event.keyCode < 48 || event.keyCode > 57) event.returnValue = false;"/>

//maxlength是限定字数 onKeypress判断键盘点击事件 event.keyCode < 48 || event.keyCode > 57判断是否是键盘上的 48 到 57的数字代码，因为这9个数字的代号都是数字类型的 event.returnValue = false; 如果是的话就可以输入

3、效果图

jQuery 对input的限制-20130727

博客分类：学习前端技术jQuery maxlengthonKeypressreturnValueeventkeyCode

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

(无图片)5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合

6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来，将保存类型(T)换成(所有文件(*.*))，将html5和解压后的图片文件夹放在同一个文件夹内效果

7、代码[html5]

<!DOCTYPE HTML>
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="images/backmanage_login.css" />
	<script language="javascript" type="text/javascript" src="images/jquery-1.8.3.js"></script>
	<script language="javascript" type="text/javascript" >
	</script>
</head>

<body>
	<input id="age" type="text" value="" maxlength=4 onKeypress="if (event.keyCode < 48 || event.keyCode > 57) event.returnValue = false;"/> -
	
	<input id="month" type="type" value="" maxlength=2 onKeypress="if (event.keyCode < 48 || event.keyCode > 57) event.returnValue = false;" /> -
	
	<input id="day" type="type" value="" maxlength=2 onKeypress="if (event.keyCode < 48 || event.keyCode > 57) event.returnValue = false;" />
</body>
</html>