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 相关文章推荐
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
javascript事件冒泡和事件捕获详解
May 26 Javascript
详解JavaScript中的Unescape()和String() 函数
Nov 09 Javascript
js实现带农历和八字等信息的日历特效
May 16 Javascript
js实现图片缓慢放大缩小效果
Aug 02 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
Feb 12 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
Mar 09 Javascript
JS实现的加减乘除四则运算计算器示例
Aug 09 Javascript
JavaScript数据类型的存储方法详解
Aug 25 Javascript
微信jssdk逻辑在vue中的运用详解
Nov 14 Javascript
细说Vue组件的服务器端渲染的过程
May 30 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
用PHP制作的意见反馈表源码
2007/03/11 PHP
PHP源码分析之变量的存储过程分解
2014/07/03 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
popdiv
2006/07/14 Javascript
JavaScript入门教程(12) js对象化编程
2009/01/31 Javascript
Jquery练习之表单验证实现代码
2010/12/14 Javascript
javascript模拟select,jselect的方法实现
2012/11/08 Javascript
nodejs的require模块(文件模块/核心模块)及路径介绍
2013/01/14 NodeJs
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
JS打开新窗口防止被浏览器阻止的方法
2015/01/03 Javascript
angularjs客户端实现压缩图片文件并上传实例
2015/07/06 Javascript
JS图片等比例缩放方法完整示例
2016/08/03 Javascript
JavaScript实现数组降维详解
2017/01/05 Javascript
JS Select下拉框(支持输入模糊查询)
2017/02/04 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
2017/12/06 Javascript
JavaScript面试出现频繁的一些易错点整理
2018/03/29 Javascript
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
2020/01/02 Javascript
JS判断数组是否包含某元素实现方法汇总
2020/06/24 Javascript
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python批量修改文件后缀示例代码分享
2013/12/24 Python
Windows下实现Python2和Python3两个版共存的方法
2015/06/12 Python
python pandas读取csv后,获取列标签的方法
2018/11/12 Python
opencv3/C++ 平面对象识别&amp;透视变换方式
2019/12/11 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
如何通过 CSS 写出火焰效果
2021/03/24 HTML / CSS
2014年两会学习心得体会
2014/03/10 职场文书
文明单位申报材料
2014/12/23 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电
人物搭配车车超萌联名预备中 【咒术迴战】 ⨯ 【天竺鼠车车】 展开合作
2022/04/11 日漫
Django框架之路由用法
2022/06/10 Python