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获取元素样式属性值的方法
Dec 25 Javascript
Javascript面向对象设计一 工厂模式
Dec 20 Javascript
js文本框输入点回车触发确定兼容IE、FF等
Nov 19 Javascript
js运动应用实例解析
Dec 28 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 Javascript
javascript DIV实现跟随鼠标移动
Mar 19 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 Javascript
Vue自定义指令介绍(2)
Dec 08 Javascript
jquery实现输入框实时输入触发事件代码
Dec 21 Javascript
微信小程序微信支付接入开发实例详解
Apr 12 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 Javascript
jquery中为什么能用$操作
Jun 18 jQuery
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文本转图片自动换行的方法
2013/03/13 PHP
一个php短网址的生成代码(仿微博短网址)
2014/05/07 PHP
浅谈PDO的rowCount函数
2015/06/18 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
Javascript Global对象
2009/08/13 Javascript
jquery pagination插件实现无刷新分页代码
2009/10/13 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
JS中对象与字符串的互相转换详解
2016/05/20 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
javascript 产生随机数的几种方法总结
2017/09/26 Javascript
如何在js代码中消灭for循环实例详解
2018/07/29 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
2018/09/05 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
elementUi vue el-radio 监听选中变化的实例代码
2019/06/28 Javascript
pyv8学习python和javascript变量进行交互
2013/12/04 Python
Python中apply函数的用法实例教程
2014/07/31 Python
Python描述器descriptor详解
2015/02/03 Python
python处理图片之PIL模块简单使用方法
2015/05/11 Python
Python学习笔记之字符串和字符串方法实例详解
2019/08/22 Python
Python通过cv2读取多个USB摄像头
2019/08/28 Python
Windows下pycharm创建Django 项目(虚拟环境)过程解析
2019/09/16 Python
用python解压分析jar包实例
2020/01/16 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
python3代码中实现加法重载的实例
2020/12/03 Python
Python tkinter实现日期选择器
2021/02/22 Python
购买英国原创艺术:Art Gallery
2018/08/25 全球购物
世界上最大的乐谱选择:Sheet Music Plus
2020/01/18 全球购物
shell程序中如何注释
2012/01/28 面试题
土地转让协议书
2014/04/15 职场文书
毕业证丢失证明范本
2014/09/20 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
关于空气污染危害的感想
2015/08/11 职场文书
宣传委员竞选稿
2015/11/19 职场文书
汉语拼音教学反思
2016/02/22 职场文书
《小蝌蚪找妈妈》教学反思
2016/02/23 职场文书