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 相关文章推荐
Extjs TriggerField在弹出窗口显示不出问题的解决方法
Jan 08 Javascript
将CKfinder整合进CKEditor3.0的新方法
Jan 10 Javascript
判断用户是否在线的代码
Mar 05 Javascript
jquery清空textarea等输入框实现代码
Apr 22 Javascript
详解JS正则replace的使用方法
Mar 06 Javascript
js操作数据库实现注册和登陆的简单实例
May 26 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
Nov 11 Javascript
Vue.js实现列表清单的操作方法
Nov 15 Javascript
webpack公共组件引用路径简化小技巧
Jun 15 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
May 18 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
Aug 20 Javascript
express中static中间件的具体使用方法
Oct 17 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
PHPMailer 中文使用说明小结
2010/01/22 PHP
PHP Parse Error: syntax error, unexpected $end 错误的解决办法
2012/06/05 PHP
IIS6.0中配置php服务全过程解析
2013/08/07 PHP
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
改变javascript函数内部this指针指向的三种方法
2010/04/23 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
2012/07/25 Javascript
jquery实现网页查找功能示例分享
2014/02/12 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
js使用for循环及if语句判断多个一样的name
2014/09/09 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
使用微信小程序开发前端【快速入门】
2016/12/05 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
2017/03/23 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
2017/07/08 jQuery
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
js中!和!!的区别与用法
2020/05/09 Javascript
使用js和canvas实现时钟效果
2020/09/08 Javascript
Vue 组件注册全解析
2020/12/17 Vue.js
elementui实现预览图片组件二次封装
2020/12/29 Javascript
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
零基础写python爬虫之爬虫编写全记录
2014/11/06 Python
Python 模板引擎的注入问题分析
2017/01/01 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
谈谈python垃圾回收机制
2020/09/27 Python
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
前端面试必备之html5的新特性
2017/09/05 HTML / CSS
HTML5之SVG 2D入门7—SVG元素的重用与引用
2013/01/30 HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
2016/03/21 HTML / CSS
建筑自我鉴定
2013/10/19 职场文书
婚礼新郎父母答谢词
2014/01/16 职场文书
农民致富事迹材料
2014/01/23 职场文书
班干部演讲稿
2014/04/24 职场文书
安全演讲稿开场白
2014/08/25 职场文书
十佳少先队员演讲稿
2014/09/12 职场文书
老龙头导游词
2015/02/11 职场文书
OpenCV实现普通阈值
2021/11/17 Java/Android