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 相关文章推荐
防止文件缓存的js代码
Jan 10 Javascript
jquery实现页面图片等比例放大缩小功能
Feb 12 Javascript
js的Prototype属性解释及常用方法
May 08 Javascript
Javascript设计模式之观察者模式(推荐)
Mar 29 Javascript
Boostrap入门准备之border box
May 09 Javascript
js转html实体的方法
Sep 27 Javascript
原生JS实现图片轮播切换效果
Dec 15 Javascript
javascript读取文本节点方法小结
Dec 15 Javascript
ios设备中angularjs无法改变页面title的解决方法
Sep 13 Javascript
json字符串对象转换代码实例
Sep 28 Javascript
vant IndexBar实现的城市列表的示例代码
Nov 20 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 jQuery
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中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
js向上无缝滚动,网站公告效果 具体代码
2013/11/18 Javascript
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
浅析javascript的间隔调用和延时调用
2014/11/12 Javascript
JavaScript中使用指数方法Math.exp()的简介
2015/06/15 Javascript
JS实现转动随机数抽奖特效代码
2020/04/16 Javascript
基于jQuery实现点击弹出层实例代码
2016/01/01 Javascript
javascript+css3 实现动态按钮菜单特效
2016/02/06 Javascript
BootStrap Fileinput的使用教程
2016/12/30 Javascript
原生JS实现几个常用DOM操作API实例
2017/01/19 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
2017/03/10 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
详解Angular如何正确的操作DOM
2018/07/06 Javascript
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
vue组件系列之TagsInput详解
2020/05/14 Javascript
python with提前退出遇到的坑与解决方案
2018/01/05 Python
pandas数据集的端到端处理
2019/02/18 Python
python实现小球弹跳效果
2019/05/10 Python
Python调用C语言的实现
2019/07/26 Python
Python While循环语句实例演示及原理解析
2020/01/03 Python
Python使用plt.boxplot() 参数绘制箱线图
2020/06/04 Python
在keras里实现自定义上采样层
2020/06/28 Python
用CSS3来实现社交分享按钮
2014/11/11 HTML / CSS
HTML5的新特性(1)
2016/03/03 HTML / CSS
爱情检讨书大全
2014/01/21 职场文书
《骑牛比赛》教后反思
2014/04/22 职场文书
信息技术课后反思
2014/04/27 职场文书
机电系毕业生求职信
2014/07/11 职场文书
护理心得体会范文
2016/01/22 职场文书
golang 生成对应的数据表struct定义操作
2021/04/28 Golang
redis调用二维码时的不断刷新排查分析
2022/04/01 Redis