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 相关文章推荐
Chrome Form多次提交表单问题的解决方法
May 09 Javascript
JavaScript中的作用域链和闭包
Jun 30 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
Apr 15 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
Nov 17 Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 Javascript
AngularJS国际化详解及示例代码
Aug 18 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
Apr 13 Javascript
javaScript日期工具类DateUtils详解
Dec 08 Javascript
Vue实现动态创建和删除数据的方法
Mar 17 Javascript
详解解决使用axios发送json后台接收不到的问题
Jun 27 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
May 28 Javascript
你可能不知道的CORS跨域资源共享
Mar 13 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
PHP3 safe_mode 失效漏洞
2006/10/09 PHP
兼容PHP5的PHP目录管理函数库
2008/07/10 PHP
setcookie中Cannot modify header information-headers already sent by错误的解决方法详解
2013/05/08 PHP
使用dump函数,给php加断点测试
2013/06/25 PHP
PHP函数实现分页含文本分页和数字分页
2014/10/23 PHP
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
在thinkphp5.0路径中实现去除index.php的方式
2019/10/16 PHP
学习javascript,实现插入排序实现代码
2011/07/31 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
2011/12/20 Javascript
jQuery中阻止冒泡事件的方法介绍
2014/04/12 Javascript
JavaScript实现垂直向上无缝滚动特效代码
2016/11/23 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2017/04/12 Javascript
Vue 2.0的数据依赖实现原理代码简析
2017/07/10 Javascript
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
javascript将16进制的字符串转换为10进制整数hex
2020/03/05 Javascript
js实现贪吃蛇游戏 canvas绘制地图
2020/09/09 Javascript
[40:17]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第一场
2018/04/06 DOTA
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
python处理大数字的方法
2015/05/27 Python
Django框架中处理URLconf中特定的URL的方法
2015/07/20 Python
利用Python开发微信支付的注意事项
2016/08/19 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
Python3爬虫里关于识别微博宫格验证码的知识点详解
2020/07/30 Python
Python 实现3种回归模型(Linear Regression,Lasso,Ridge)的示例
2020/10/15 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
艺术系大学生毕业个人自我评价
2013/09/19 职场文书
会计专业毕业生自我评价
2013/09/25 职场文书
给导游的表扬信
2014/01/10 职场文书
责任书范本
2014/08/25 职场文书
2014年政协工作总结
2014/12/09 职场文书
2015年社区重阳节活动总结
2015/07/30 职场文书
2016年校长新年寄语
2015/08/17 职场文书
Oracle 死锁的检测查询及处理
2021/09/25 Oracle