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 相关文章推荐
javascript 函数调用规则
Aug 26 Javascript
jQuery中对节点进行操作的相关介绍
Apr 16 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
Nov 19 Javascript
JavaScript简单获取系统当前时间完整示例
Aug 02 Javascript
js控制li的隐藏和显示实例代码
Oct 15 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
May 02 Javascript
React数据传递之组件内部通信的方法
Dec 31 Javascript
bootstrap table支持高度百分比的实例代码
Feb 28 Javascript
webpack 打包压缩js和css的方法示例
Mar 20 Javascript
vue中设置height:100%无效的问题及解决方法
Jul 27 Javascript
微信小程序实现点击生成随机验证码
Sep 09 Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 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
MYSQL数据库初学者使用指南
2006/11/16 PHP
PHP实现采集程序原理和简单示例代码
2007/03/18 PHP
php实现屏蔽掉黑帽SEO的搜索关键字
2015/04/15 PHP
对象的类型:本地对象(1)
2006/12/29 Javascript
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
javascript AOP 实现ajax回调函数使用比较方便
2010/11/20 Javascript
深入理解JavaScript系列(15) 函数(Functions)
2012/04/12 Javascript
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
Bootstrap CSS使用方法
2016/12/23 Javascript
js实现简单的选项卡效果
2017/02/23 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
vue.js项目nginx部署教程
2018/04/05 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
vue模块拖拽实现示例代码
2019/03/09 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
Python3实现连接SQLite数据库的方法
2014/08/23 Python
Python读取数据集并消除数据中的空行方法
2018/07/12 Python
我就是这样学习Python中的列表
2019/06/02 Python
在flask中使用python-dotenv+flask-cli自定义命令(推荐)
2020/01/05 Python
曼联官方网上商店:Manchester United Direct
2017/07/28 全球购物
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
数据库笔试题
2013/05/09 面试题
研究生考核个人自我鉴定
2014/03/27 职场文书
竞选学生会主席演讲稿
2014/04/24 职场文书
责任胜于能力演讲稿
2014/05/20 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
幽默自我介绍演讲稿
2014/08/21 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
诚信教育主题班会
2015/08/13 职场文书
党章学习心得体会2016
2016/01/14 职场文书
加强党性修养心得体会
2016/01/21 职场文书
员工工作心得体会
2019/05/07 职场文书
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers