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实现进度条的两种便捷方式
Sep 26 Javascript
js中通过父级进行查找定位元素
Jun 15 Javascript
js继承call()和apply()方法总结
Dec 08 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
Mar 04 Javascript
js时间戳转为日期格式的方法
Dec 28 Javascript
js格式化输入框内金额、银行卡号
Feb 01 Javascript
微信小程序 template模板详解及实例代码
Mar 09 Javascript
微信小程序选择图片和放大预览图片功能
Nov 02 Javascript
Vue.js点击切换按钮改变内容的实例讲解
Aug 22 Javascript
解决layer弹出层自适应页面大小的问题
Sep 16 Javascript
VUE 解决mode为history页面为空白的问题
Nov 01 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
Jul 20 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
PHP header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
实现获取http内容的php函数分享
2014/02/16 PHP
php创建、获取cookie及基础要点分析
2015/01/26 PHP
关于PHP中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
jquery 操作单选框,复选框,下拉列表实现代码
2009/10/27 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
2010/06/18 Javascript
详解JavaScript函数绑定
2013/08/18 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
Javascript非构造函数的继承
2015/04/27 Javascript
使用Object.defineProperty实现简单的js双向绑定
2016/04/15 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
微信小程序 数据封装,参数传值等经验分享
2017/01/09 Javascript
jQuery实现弹出窗口弹出div层的实例代码
2017/01/09 Javascript
js实现下一页页码效果
2017/03/07 Javascript
原生JS封装animate运动框架的实例
2017/10/12 Javascript
vue.js或js实现中文A-Z排序的方法
2018/03/08 Javascript
vue 属性拦截实现双向绑定的实例代码
2018/10/24 Javascript
Vue js 的生命周期(看了就懂)(推荐)
2019/03/29 Javascript
node实现socket链接与GPRS进行通信的方法
2019/05/20 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
Python描述器descriptor详解
2015/02/03 Python
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
python抖音表白程序源代码
2019/04/07 Python
Python 私有化操作实例分析
2019/11/21 Python
关于python tushare Tkinter构建的简单股票可视化查询系统(Beta v0.13)
2020/10/19 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
军训生自我鉴定范文
2013/12/27 职场文书
班风学风建设方案
2014/05/06 职场文书
民事申诉状范本
2015/05/20 职场文书
公司与个人合作协议书
2016/03/19 职场文书
Python中json.dumps()函数的使用解析
2021/05/17 Python
Python基础 括号()[]{}的详解
2021/11/07 Python