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代码
Dec 01 Javascript
Javascript中的常见排序算法
Mar 27 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
Jan 15 Javascript
jquery插件制作简单示例说明
Feb 03 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
Nov 09 Javascript
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
完美实现js拖拽效果 return false用法详解
Jul 28 Javascript
详解使用nvm管理多版本node的方法
Aug 30 Javascript
JS实现点击拉拽轮播图pc端移动端适配
Sep 05 Javascript
vue实现的网易云音乐在线播放和下载功能案例
Feb 18 Javascript
vue组件间的参数传递实例详解
Apr 26 Javascript
使用Vant完成Dialog弹框案例
Nov 11 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判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
深入理解PHP中的count函数
2016/05/31 PHP
PHP实现的同步推荐操作API接口案例分析
2016/11/30 PHP
ThinkPHP 模板引擎使用详解
2017/05/07 PHP
使用PHP json_decode可能遇到的坑与解决方法
2017/08/03 PHP
浅谈Laravel核心解读之Console内核
2018/12/02 PHP
CI框架网页缓存简单用法分析
2018/12/26 PHP
Javascript优化技巧(文件瘦身篇)
2008/01/28 Javascript
js左侧多级菜单动态的解决方案
2010/02/01 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
NodeJS连接MongoDB数据库时报错的快速解决方法
2016/05/13 NodeJs
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
node.js中的事件处理机制详解
2016/11/26 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
2017/09/14 Javascript
vue加载自定义的js文件方法
2018/03/13 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
[09:47]2018DOTA2亚洲邀请赛4.5SOLO赛 No[o]ne vs Sumail
2018/04/06 DOTA
Python列表list数组array用法实例解析
2014/10/28 Python
python3.6+django2.0开发一套学员管理系统
2018/03/03 Python
tensorflow实现在函数中用tf.Print输出中间值
2020/01/21 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
完美的中文自荐信
2014/05/24 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书
高中军训的心得体会
2014/09/01 职场文书
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js
frg-100简单操作(设置)说明
2022/04/05 无线电
Android RecyclerView实现九宫格效果
2022/06/28 Java/Android