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 相关文章推荐
JS版网站风格切换实例代码
Oct 06 Javascript
javascript+css 网页每次加载不同样式的实现方法
Dec 27 Javascript
jquery 查找新建元素代码
Jul 06 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
Jan 06 Javascript
如何编写高质量JS代码
Dec 28 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
Aug 11 Javascript
浅谈javascript中执行环境(作用域)与作用域链
Dec 08 Javascript
微信小程序 tabs选项卡效果的实现
Jan 05 Javascript
js 监控iframe URL的变化实例代码
Jul 12 Javascript
详解react内联样式使用webpack将px转rem
Sep 13 Javascript
原生JavaScript实现留言板
Jan 10 Javascript
Node实现搜索框进行模糊查询
Jun 28 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
五款常用mysql slow log分析工具的比较分析
2011/05/22 PHP
php检查字符串中是否包含7位GSM字符的方法
2015/03/17 PHP
PHP attributes()函数讲解
2019/02/03 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
PHP使用Http Post请求发送Json对象数据代码解析
2020/07/16 PHP
页面中js执行顺序
2009/11/09 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
js给页面加style无效果的解决方法
2014/01/20 Javascript
ajax提交表单实现网页无刷新注册示例
2014/05/08 Javascript
AngularJS 依赖注入详解及示例代码
2016/08/17 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
微信小程序之数据缓存的实例详解
2017/09/29 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
JS扩展String.prototype.format字符串拼接的功能
2018/03/09 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
2018/12/05 jQuery
Vue指令指令大全
2019/02/09 Javascript
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
Vue组件模板及组件互相引用代码实例
2020/03/11 Javascript
Vue实现跑马灯效果
2020/05/25 Javascript
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
Scrapy-redis爬虫分布式爬取的分析和实现
2017/02/07 Python
Python日期时间对象转换为字符串的实例
2018/06/22 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
pyqt远程批量执行Linux命令程序的方法
2019/02/14 Python
Python 取numpy数组的某几行某几列方法
2019/10/24 Python
python 实现二维字典的键值合并等函数
2019/12/06 Python
Django {{ MEDIA_URL }}无法显示图片的解决方式
2020/04/07 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
CSS3提交意见输入框样式代码
2014/10/30 HTML / CSS
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
喜诗官方在线巧克力店:See’s Candies
2017/01/01 全球购物
公民授权委托书范本
2014/09/17 职场文书
老公给老婆的检讨书(精华篇)
2014/10/18 职场文书
文员岗位职责范本
2015/04/16 职场文书
毕业生入职感言
2015/07/31 职场文书