首页 > 语言 > JavaScript > 正文

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

2024-05-06 14:57:32
字体:
来源:转载
供稿:网友

在公司开发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;   }); }; 

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选