js限制文本框只能输入数字方法小结


Posted in Javascript onJune 16, 2014

有时需要限制文本框输入内容的类型,本节分享下正则表达式限制文本框只能输入数字、小数点、英文字母、汉字等代码。

例如,输入大于0的正整数

<input onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}">

1,文本框只能输入数字代码(小数点也不能输入)

<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">

2,只能输入数字,能输小数点. IE only

<input onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')">
<input name=txt1 onchange="if(/\D/.test(this.value)){alert('只能输入数字');this.value='';}">

3,数字和小数点方法二

<input type=text t_value="" o_value="" onkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value" onkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value" onblur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.o_value=this.value}">

封装成单独的函数: 

function keyPress(ob) {
 if (!ob.value.match(/^[\+\-]?\d*?\.?\d*?$/)) ob.value = ob.t_value; else ob.t_value = ob.value; if (ob.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/)) ob.o_value = ob.value;
}
function keyUp(ob) {
 if (!ob.value.match(/^[\+\-]?\d*?\.?\d*?$/)) ob.value = ob.t_value; else ob.t_value = ob.value; if (ob.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/)) ob.o_value = ob.value;
    }
function onBlur(ob) {
if(!ob.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))ob.value=ob.o_value;else{if(ob.value.match(/^\.\d+$/))ob.value=0+ob.value;if(ob.value.match(/^\.$/))ob.value=0;ob.o_value=ob.value};
}

只需在调用,传入this对象即可!

4,只能输入字母和汉字

<input onkeyup="value=value.replace(/[\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))" maxlength=10 name="Numbers">

5,只能输入英文字母和数字,不能输入中文

<input onkeyup="value=value.replace(/[^\w\.\/]/ig,'')">

6,只能输入数字和英文

<input onKeyUp="value=value.replace(/[^\d|chun]/g,'')">

7,小数点后只能有最多两位(数字,中文都可输入),不能输入字母和运算符号:

<input onKeyPress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 || /\.\d\d$/.test(value))event.returnValue=false">

8,小数点后只能有最多两位(数字,字母,中文都可输入),可以输入运算符号:

<input onkeyup="this.value=this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')">

这篇文章就介绍到这了,需要的朋友可以参考一下

Javascript 相关文章推荐
jQuery.autocomplete 支持中文输入(firefox)修正方法
Mar 10 Javascript
10款非常有用的 Ajax 插件分享
Mar 14 Javascript
举例讲解AngularJS中的模块
Jun 17 Javascript
jQuery 选择同时包含两个class的元素的实现方法
Jun 01 Javascript
RequireJS多页面应用实例分析
Jun 29 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
Apr 10 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
LayUI表格批量删除方法
Aug 15 Javascript
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
Ajax常用封装库——Axios的使用
May 08 Javascript
JS实现简单的顶部定时关闭层效果
Jun 15 #Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 #Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 #Javascript
js中的如何定位固定层的位置
Jun 15 #Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
Jun 15 #Javascript
jquery实现通用版鼠标经过淡入淡出效果
Jun 15 #Javascript
jQuery实现的原图对比窗帘效果
Jun 15 #Javascript
You might like
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
PHPMailer邮件类利用smtp.163.com发送邮件方法
2008/09/11 PHP
destoon二次开发入门示例
2014/06/20 PHP
php防止恶意刷新与刷票的方法
2014/11/21 PHP
PHP带节点操作的无限分类实现方法详解
2016/11/09 PHP
Laravel中log无法写入问题的解决
2017/06/17 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
JavaScript 读取元素的CSS信息的代码
2010/02/07 Javascript
window.navigate 与 window.location.href 的使用区别介绍
2013/09/21 Javascript
javascript实现连续赋值
2015/08/10 Javascript
AngularJS中的指令全面解析(必看)
2016/05/20 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
2018/02/22 Javascript
CKEditor4配置与开发详细中文说明文档
2018/10/08 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
小程序测试后台服务的方法(ngrok)
2019/03/08 Javascript
[04:03]DOTA2肉山黑名单梦之声 风暴之灵中文配音鉴赏
2013/07/03 DOTA
[56:18]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第二局
2016/03/05 DOTA
Python语言技巧之三元运算符使用介绍
2013/03/04 Python
Python Sleep休眠函数使用简单实例
2015/02/02 Python
Python编程入门之Hello World的三种实现方式
2015/11/13 Python
详解python单例模式与metaclass
2016/01/15 Python
Python多线程爬虫实战_爬取糗事百科段子的实例
2017/12/15 Python
使用python判断你是青少年还是老年人
2018/11/29 Python
python爬取cnvd漏洞库信息的实例
2019/02/14 Python
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
PyQt5 文本输入框自动补全QLineEdit的实现示例
2020/05/13 Python
Python+PyQt5+MySQL实现天气管理系统
2020/06/16 Python
水果花束:Fruit Bouquets
2017/12/20 全球购物
中职应届生会计求职信
2013/10/23 职场文书
数控专业个人求职信范例
2013/11/29 职场文书
普通简短的个人自我评价
2014/02/15 职场文书
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
课外活动实习计划
2015/01/19 职场文书
导游词之南京中山陵
2019/11/27 职场文书
mybatis3中@SelectProvider传递参数方式
2021/08/04 Java/Android
nginx sticky实现基于cookie负载均衡示例详解
2022/12/24 Servers