3种Jquery限制文本框只能输入数字字母的方法


Posted in Javascript onDecember 03, 2014

onlyNum(),onlyAlpha()和onlyNumAlpha()3个Jquery扩展方法

number.js

// ----------------------------------------------------------------------

// <summary>

// 限制只能输入数字

// </summary>

// ----------------------------------------------------------------------

$.fn.onlyNum = function () {

    $(this).keypress(function (event) {

        var eventObj = event || e;

        var keyCode = eventObj.keyCode || eventObj.which;

        if ((keyCode >= 48 && keyCode <= 57))

            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;

    });

};

letter.js

// ----------------------------------------------------------------------

// <summary>

// 限制只能输入字母

// </summary>

// ----------------------------------------------------------------------

$.fn.onlyAlpha = function () {

    $(this).keypress(function (event) {

        var eventObj = event || e;

        var keyCode = eventObj.keyCode || eventObj.which;

        if ((keyCode >= 65 && keyCode <= 90) || (keyCode >= 97 && keyCode <= 122))

            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;

    });

};

number_letter.js

// ----------------------------------------------------------------------

// <summary>

// 限制只能输入数字和字母

// </summary>

// ----------------------------------------------------------------------

$.fn.onlyNumAlpha = function () {

    $(this).keypress(function (event) {

        var eventObj = event || e;

        var keyCode = eventObj.keyCode || eventObj.which;

        if ((keyCode >= 48 && keyCode <= 57) || (keyCode >= 65 && keyCode <= 90) || (keyCode >= 97 && keyCode <= 122))

            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;

    });

};

use.js

$(function () {

    // 限制使用了onlyNum类样式的控件只能输入数字

    $(".onlyNum").onlyNum();

    //限制使用了onlyAlpha类样式的控件只能输入字母

    $(".onlyAlpha").onlyAlpha();

    // 限制使用了onlyNumAlpha类样式的控件只能输入数字和字母

    $(".onlyNumAlpha").onlyNumAlpha();

以上方法均可实现项目要求,大家根据自己的具体需求自由选择吧

Javascript 相关文章推荐
ExtJS判断IE浏览器类型的方法
Feb 10 Javascript
javascript实现图片自动和可控的轮播切换特效
Apr 13 Javascript
jQuery防止重复绑定事件的解决方法
May 14 Javascript
JS 实现Base64编码与解码实例详解
Nov 07 Javascript
如何解决vue与传统jquery插件冲突
Mar 20 Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 Javascript
react-native DatePicker日期选择组件的实现代码
Sep 12 Javascript
详解基于vue-router的动态权限控制实现方案
Sep 28 Javascript
KOA+egg.js集成kafka消息队列的示例
Nov 09 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
在antd Form表单中select设置初始值操作
Nov 02 Javascript
原生js+canvas实现验证码
Nov 29 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
Dec 03 #Javascript
javascript中clone对象详解
Dec 03 #Javascript
javascript使用正则表达式检测IP地址
Dec 03 #Javascript
Javascript快速排序算法详解
Dec 03 #Javascript
Javascript冒泡排序算法详解
Dec 03 #Javascript
Javascript堆排序算法详解
Dec 03 #Javascript
node.js下when.js 的异步编程实践
Dec 03 #Javascript
You might like
一个ORACLE分页程序,挺实用的.
2006/10/09 PHP
zend Framework中的Layout(模块化得布局)详解
2013/06/28 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
PHP+Ajax简单get验证操作示例
2019/03/02 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
使用新的消息弹出框blackbirdjs
2008/10/16 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
2013/05/03 Javascript
JavaScript作用域与作用域链深入解析
2013/12/06 Javascript
2则自己编写的jQuery特效分享
2015/02/26 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
Angularjs修改密码的实例代码
2017/05/26 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
2017/11/17 Javascript
JS实现读取xml内容并输出到div中的方法示例
2018/04/19 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
2018/12/11 Javascript
Vue 理解之白话 getter/setter详解
2019/04/16 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
2019/07/15 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
2020/09/04 Javascript
vue created钩子函数与mounted钩子函数的用法区别
2020/11/05 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
2020/11/12 Javascript
JavaScript使用setTimeout实现倒计时效果
2021/02/19 Javascript
[55:16]Mski vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
Python实现字典的遍历与排序功能示例
2017/12/23 Python
使用C++扩展Python的功能详解
2018/01/12 Python
python编辑用户登入界面的实现代码
2018/07/16 Python
python实现飞机大战项目
2020/03/11 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
css3实现的下拉菜单效果示例
2014/01/22 HTML / CSS
马来西亚时装购物网站:ZALORA马来西亚
2017/03/14 全球购物
德国童装购物网站:NICKI´S.com
2018/04/20 全球购物
医院领导班子整改方案
2014/10/01 职场文书
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
《勇者辞职不干了》上卷BD发售宣传CM公开
2022/04/08 日漫