jQuery控制文本框只能输入数字和字母及使用方法


Posted in Javascript onMay 26, 2016

在公司开发WinForm项目时,发现公司自主研发的textbox控件非常强大,可以实现"只能输入数字"、"只能输入字母"和"只能输入数字和字母"的三种输入限制,这样就可以精确控制用户输入的内容范围,让"用户永远没有办法输入限定的内容范围之外的其他内容",也就是"用户即使想犯错误也没有机会",这种限制控件输入的方式给了我很大的启发,如果在web项目中也能做到这样的精确控制,那么就可以避免因为一些非法输入而造成系统出错,既然WinForm里面可以实现这样的控件,那么web项目里面也应该有办法去实现类似这样的控件或者能够做到类似的效果,经过自己的一番研究和查找资料,终于做到了类似的效果,针对"只能输入数字"、"只能输入字母"和"只能输入数字和字母"的三种输入限制,我封装成onlyNum(),onlyAlpha()和onlyNumAlpha()3个Jquery扩展方法,方便复用,由于里面一些JS代码涉及到了"禁用输入法,获取剪切板的内容",而"禁用输入法,获取剪切板的内容"只能在IE浏览器下才有效,对于别的浏览器是无效的,因此这三个方法只适合在IE浏览器下使用才有效,三个方法的代码如下

一、限制只能输入数字

// ----------------------------------------------------------------------
 // <summary>
 // 限制只能输入数字
 // </summary>
 // ----------------------------------------------------------------------
 $.fn.onlyNum = function () {
   $(this).keypress(function (event) {
     var eventObj = event || e;
     var keyCode = eventObj.keyCode || eventObj.which;
     if ((keyCode >= && keyCode <= ))
       return true;
     else
       return false;
   }).focus(function () {
   //禁用输入法
     this.style.imeMode = 'disabled';
   }).bind("paste", function () {
   //获取剪切板的内容
     var clipboard = window.clipboardData.getData("Text");
     if (/^\d+$/.test(clipboard))
       return true;
     else
       return false;
   });
 };

二、限制只能输入字母

// ----------------------------------------------------------------------
 // <summary>
 // 限制只能输入字母
 // </summary>
 // ----------------------------------------------------------------------
 $.fn.onlyAlpha = function () {
   $(this).keypress(function (event) {
     var eventObj = event || e;
     var keyCode = eventObj.keyCode || eventObj.which;
     if ((keyCode >= && keyCode <= ) || (keyCode >= && keyCode <= ))
       return true;
     else
       return false;
   }).focus(function () {
     this.style.imeMode = 'disabled';
   }).bind("paste", function () {
     var clipboard = window.clipboardData.getData("Text");
     if (/^[a-zA-Z]+$/.test(clipboard))
       return true;
     else
       return false;
   });
 };

 三、 限制只能输入数字和字母

// ----------------------------------------------------------------------
 // <summary>
 // 限制只能输入数字和字母
 // </summary>
 // ----------------------------------------------------------------------
 $.fn.onlyNumAlpha = function () {
   $(this).keypress(function (event) {
     var eventObj = event || e;
     var keyCode = eventObj.keyCode || eventObj.which;
     if ((keyCode >= && keyCode <= ) || (keyCode >= && keyCode <= ) || (keyCode >= && keyCode <= ))
       return true;
     else
       return false;
   }).focus(function () {
     this.style.imeMode = 'disabled';
   }).bind("paste", function () {
     var clipboard = window.clipboardData.getData("Text");
     if (/^(\d|[a-zA-Z])+$/.test(clipboard))
       return true;
     else
       return false;
   });
 };

使用方法:首先在画面加载完成之后编写如下的JS脚本

$(function () {
   // 限制使用了onlyNum类样式的控件只能输入数字
   $(".onlyNum").onlyNum();
   //限制使用了onlyAlpha类样式的控件只能输入字母
   $(".onlyAlpha").onlyAlpha();
   // 限制使用了onlyNumAlpha类样式的控件只能输入数字和字母
   $(".onlyNumAlpha").onlyNumAlpha();
  });

对需要做输入控制的控件设置class样式

<ul>
     <li>只能输入数字:<input type="text" class="onlyNum" /></li>
     <li>只能输入字母:<input type="text" class="onlyAlpha" /></li>
     <li>只能输入数字和字母:<input type="text" class="onlyNumAlpha" /></li>
 </ul>

这样画面上凡是设置了class="onlyNum"的控件就只能输入数字,设置了class="onlyAlpha"的控件只能输入字母,设置了class="onlyNumAlpha"的控件只能输入数字和字母,通过这种方式就可以限制了用户的输入范围,避免用户进行一些非法的输入。

以上所述是小编给大家介绍的jQuery控制文本框只能输入数字和字母及使用方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript之ESC(第二类混淆)
May 06 Javascript
原始的js代码和jquery对比体会
Sep 10 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
Sep 16 Javascript
js获取图片宽高的方法
Nov 25 Javascript
node.js 动态执行脚本
Jun 02 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
Mar 15 Javascript
浅谈Vue内置component组件的应用场景
Mar 27 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
Aug 24 Javascript
Vue通过ref父子组件拿值方法
Sep 12 Javascript
通过实践编写优雅的JavaScript代码
May 30 Javascript
vue中keep-alive,include的缓存问题
Nov 26 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
Aug 13 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
May 26 #Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
May 26 #Javascript
怎么引入(调用)一个JS文件
May 26 #Javascript
JS加载器如何动态加载外部js文件
May 26 #Javascript
jquery获取复选框的值的简单实例
May 26 #Javascript
改变checkbox默认选中状态及取值的实现代码
May 26 #Javascript
JavaScript数组实现数据结构中的队列与堆栈
May 26 #Javascript
You might like
生成静态页面的PHP类
2006/11/25 PHP
详解:――如何将图片储存在数据库里
2006/12/05 PHP
PHP 常用函数库和一些实用小技巧
2009/01/01 PHP
解析在apache里面给php写虚拟目录的详细方法
2013/06/24 PHP
php实现用于计算执行时间的类实例
2015/04/18 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
认识延迟时间为0的setTimeout
2008/05/16 Javascript
文本框的字数限制功能jquery插件
2009/11/24 Javascript
JsRender实用入门教程
2014/10/31 Javascript
JavaScript实现计算多边形质心的方法示例
2018/01/31 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
angularjs中$http异步上传Excel文件方法
2018/02/23 Javascript
基于express中路由规则及获取请求参数的方法
2018/03/12 Javascript
bootstrap 路径导航 分页 进度条的实例代码
2018/08/06 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
2018/11/02 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
谈谈IntersectionObserver懒加载的具体使用
2019/10/15 Javascript
vue-cli设置css不生效的解决方法
2020/02/07 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
2020/08/31 Javascript
[48:39]Ti4主赛事胜者组第一天 EG vs NEWBEE 2
2014/07/19 DOTA
[06:07]辉夜杯现场观众互动 “比谁远送显示器”
2015/12/26 DOTA
Python实现随机漫步功能
2018/07/09 Python
Python json模块dumps、loads操作示例
2018/09/06 Python
删除DataFrame中值全为NaN或者包含有NaN的列或行方法
2018/11/06 Python
python写程序统计词频的方法
2019/07/29 Python
python集合常见运算案例解析
2019/10/17 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
Django权限控制的使用
2021/01/07 Python
Linux如何为某个操作添加别名
2015/02/05 面试题
注册资产评估专业求职信
2014/07/16 职场文书
《改造我们的学习》心得体会
2014/11/07 职场文书
财务工作失职检讨书
2014/11/21 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
门球健将观后感
2015/06/16 职场文书
win10忘记pin密码登录不了怎么办?win10忘记pin密码登不进去的解决方法
2022/07/07 数码科技
JS高级程序设计之class继承重点详解
2022/07/07 Javascript