jQuery 对input的限制-20130727 -

xjwolaile

浏览: 341185 次
性别:
来自: 杭州

最近访客更多访客>>

waylon33

Cyoooa

h06910101

androidHua

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery 对input的限制-20130727

博客分类：

学习
前端技术
jQuery

maxlength onKeypress returnValue event keyCode

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、效果图

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>

查看图片附件

分享到：

今天告假一天-20130728 | jQuery 侧栏与工具提示-20130726

2013-07-27 23:06
浏览 864
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery 对input的限制-20130727

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery 对input的限制-20130727

评论

发表评论

相关推荐

Zepto

node.js的学习-20140611

node.js的学习-20140609

git的学习-20140604

PC和移动端的页面的一些差距-20140525

Bootstrap排版基础样式和响应式图片-20140521

Bootstrap特性、设计和组件-20140519

Bootstrap流式布局-20140515

Bootstrap的宽度和分辨率的差别-20140514

Bootstrap的认识-20140513

jquery初步认识-20140123

html5的特殊标签作用-20140114

ie下的指定样式-20140106

margin-left在IE6下左浮动加倍-20140102

浮动存在的问题-20131229

在ie6下同张图片不能外面包有a标签后在画热区-20131223

ie6下导航存在的问题和-2013-12-20

按比例展示的小js-20131217

定位需要注意-20131214

flash在Safari下的BUG-20131212

最近访客更多访客>>