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 相关文章推荐
js隐藏与显示回到顶部按钮及window.onscroll事件应用
Jan 25 Javascript
JS简单的图片放大缩小的两种方法
Nov 11 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
Nov 28 Javascript
JQuery选择器、过滤器大整理
May 26 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
Bootstrap select下拉联动(jQuery cxselect)
Jan 04 Javascript
jquery 一键复制到剪切板的实例
Sep 20 jQuery
使用Vue-cli 3.0搭建Vue项目的方法
Jun 07 Javascript
怎样在vue项目下添加ESLint的方法
May 16 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
Jul 19 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
Sep 03 Javascript
nodemon实现Typescript项目热更新的示例代码
Nov 19 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
基于Zend的Config机制的应用分析
2013/05/02 PHP
php无限遍历目录示例
2014/02/21 PHP
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
thinkPHP删除前弹出确认框的简单实现方法
2016/05/16 PHP
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
jQuery判断checkbox是否选中的小例子
2013/12/02 Javascript
Node.js的包详细介绍
2015/01/14 Javascript
jQuery操作DOM之获取表单控件的值
2015/01/23 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
2016/07/01 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
2016/10/27 Javascript
你有必要知道的10个JavaScript难点
2017/07/25 Javascript
Vue-resource拦截器判断token失效跳转的实例
2017/10/27 Javascript
VUE.js实现动态设置输入框disabled属性
2019/10/28 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
vue el-upload上传文件的示例代码
2020/12/21 Vue.js
Python下使用Scrapy爬取网页内容的实例
2018/05/21 Python
python3.x实现base64加密和解密
2019/03/28 Python
对Python 简单串口收发GUI界面的实例详解
2019/06/12 Python
django解决订单并发问题【推荐】
2019/07/31 Python
Python PIL图片添加字体的例子
2019/08/22 Python
解决Jupyter Notebook开始菜单栏Anaconda下消失的问题
2020/04/13 Python
美国网上眼镜商城:Zenni Optical
2016/11/20 全球购物
Crabtree & Evelyn欧盟:豪华洗浴、身体和护发
2021/03/09 全球购物
软件测试工程师笔试题带答案
2015/03/27 面试题
药学专业大学生自荐信
2013/09/28 职场文书
业务主管岗位职责范本
2013/12/25 职场文书
阳光体育活动方案
2014/02/16 职场文书
校庆接待方案
2014/03/18 职场文书
扬州个园导游词
2015/02/06 职场文书
Python Numpy之linspace用法说明
2021/04/17 Python
详解redis分布式锁的这些坑
2021/05/19 Redis
解决Maven项目中 Invalid bound statement 无效的绑定问题
2021/06/15 Java/Android
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript
ubuntu端向日葵键盘输入卡顿问题及解决
2022/12/24 Servers