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 相关文章推荐
Javascript this关键字使用分析
Oct 21 Javascript
说明你的Javascript技术很烂的五个原因
Apr 26 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
Oct 21 Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 Javascript
js调用百度地图及调用百度地图的搜索功能
Sep 07 Javascript
jquery中取消和绑定hover事件的实现代码
Jun 02 Javascript
简单实现Vue的observer和watcher
Dec 21 Javascript
不刷新网页就能链接新的js文件方法总结
Mar 01 Javascript
在Chrome DevTools中调试JavaScript的实现
Apr 07 Javascript
js实现简单贪吃蛇游戏
May 15 Javascript
如何将Node.js中的回调转换为Promise
Nov 10 Javascript
JS前端轻量fabric.js系列之画布初始化
Aug 05 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文件去掉PHP注释空格的函数分析(PHP代码压缩)
2013/07/02 PHP
PHP中使用sleep函数实现定时任务实例分享
2014/08/21 PHP
PHP使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
jQuery学习7 操作JavaScript对象和集合的函数
2010/02/07 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
2010/12/28 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
js实现简单的购物车有图有代码
2014/05/26 Javascript
在线所见即所得HTML编辑器的实现原理浅析
2015/04/25 Javascript
javascript用函数实现对象的方法
2015/05/14 Javascript
在JavaScript中操作时间之setYear()方法的使用
2015/06/12 Javascript
JavaScript操作表单实例讲解(上)
2016/06/20 Javascript
浅谈js常用内置方法和对象
2016/09/24 Javascript
jQuery实现的两种简单弹窗效果示例
2018/04/18 jQuery
详解Express笔记之动态渲染HTML(新手入坑)
2018/12/13 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
2019/07/05 Javascript
vue项目中实现缓存的最佳方案详解
2019/07/11 Javascript
swiper4实现移动端导航切换
2020/10/16 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
js+canvas实现五子棋小游戏
2020/08/02 Javascript
python结合selenium获取XX省交通违章数据的实现思路及代码
2016/06/26 Python
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
Python+Django搭建自己的blog网站
2018/03/13 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
python gdal安装与简单使用
2019/08/01 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
在购买印度民族服饰:Soch
2020/09/15 全球购物
机电专业体育教师求职信
2013/09/21 职场文书
会计应聘求职信范文
2013/12/17 职场文书
学生党员思想汇报范文
2014/01/09 职场文书
对党的十八届四中全会的期盼
2014/10/17 职场文书
乌镇导游词
2015/02/02 职场文书
《花钟》教学反思
2016/02/17 职场文书
python神经网络编程之手写数字识别
2021/05/08 Python