对于文本框限制,经常有人提到很多人用event屏蔽某些键来完成,但是这样会有很多问题,比如只能屏蔽单个字符的输入,浮点数输入了两个小数点时就有些难办了,并且如果选择网页中的一段文字,直接拖进来,也是没办法屏蔽的。
当然,在IE下有onpropertychange事件,参看我之前写的JS限制文本框只能输入整形或浮点数,然而到了其他浏览器就无能为力了。
一直想找个解决方案,前两天在蓝色理想看到一篇《认识延迟时间为0的setTimeout》给了我思路,他能用setTimeout为什么我就不能用setInterval,方案应运而生。其实很简单,就是间隔一段时间验证下输入文字,看看是否符合,不符合则删除。代码如下
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
以上代码我想不用过多解释,唯一要解释的就时一个等于null的判断,因为没有null的判断,文本框当为空的时候会显示null,因此加上的,代码间隔100毫秒执行一次。
经测试,该方法是可行的,于是为了方便调用,封装成了服务器控件,验证模式暂时定义了三种,整数,浮点数以及自定义(欢迎大家提供其他类型的验证正则式)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
实现控件代码很简单,定义了三个属性:
1、Text:这个就不用解释了;
2、CheckMode:选择上面的验证模式;
3、CustomReg:自定义验证正则表达式,不包含前后两"/"(只有CheckMode在Custom状态下才生效)
点这里下载,应该一看就懂:)(另外基类定义的属性,只有cssclass、height和width三个有效)
调用如下:
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
示例在 这里