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 相关文章推荐
artdialog的图片/标题以及关闭按钮不显示的解决方法
Jun 27 Javascript
window.open 以post方式传递参数示例代码
Feb 27 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
Feb 05 Javascript
关于原生js中bind函数的简单实现
Aug 10 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
图文详解Javascript中的上下文和作用域
Feb 15 Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 10 Javascript
underscore之Chaining_动力节点Java学院整理
Jul 10 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
Router解决跨模块下的页面跳转示例
Jan 11 Javascript
vue2.0 路由不显示router-view的解决方法
Mar 06 Javascript
在layui框架中select下拉框监听更改事件的例子
Sep 20 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
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
php下载文件,添加响应头的简单实例
2016/09/22 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
PHP三种方式实现链式操作详解
2017/01/21 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
JavaScript 的继承
2011/10/01 Javascript
js 判断上传文件大小及格式代码
2013/11/13 Javascript
javascript操作字符串的原生方法
2014/12/22 Javascript
js实现禁止中文输入的方法
2015/01/14 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
js正则表达式replace替换变量方法
2016/05/21 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
2016/11/10 Javascript
如何提高Dom访问速度
2017/01/05 Javascript
ES6 Promise对象的含义和基本用法分析
2019/06/14 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
2020/12/20 Javascript
Windows下为Python安装Matplotlib模块
2015/11/06 Python
Python外星人入侵游戏编程完整版
2020/03/30 Python
python技能之数据导出excel的实例代码
2017/08/11 Python
python实现机械分词之逆向最大匹配算法代码示例
2017/12/13 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
Python面向对象程序设计OOP入门教程【类,实例,继承,重载等】
2019/01/05 Python
Python多线程实现支付模拟请求过程解析
2020/04/21 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
python实现简单文件读写函数
2021/02/25 Python
来自圣地亚哥的实惠太阳镜:Knockaround
2018/08/27 全球购物
String s = new String(“xyz”);创建了几个String Object?
2015/08/05 面试题
美术专业学生个人自我评价
2013/09/19 职场文书
幼儿教师国培感言
2014/02/19 职场文书
写给老婆的检讨书
2014/02/21 职场文书
计算机科学技术自荐信
2014/06/12 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
2015年银行工作总结范文
2015/04/01 职场文书
法人代表证明书范本
2015/06/18 职场文书