JS限制输入框输入的实现代码


Posted in Javascript onJuly 02, 2018

1.文本框只能输入数字代码(小数点也不能输入)

代码如下:

<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">

2.只能输入数字,能输小数点.

代码如下:

<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 tvalue="" ovalue="" onkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.tvalue=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.ovalue=this.value" onkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.tvalue=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.ovalue=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.ovalue=this.value}">

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.只能输入数字和英文<font color="Red">chun</font>

代码如下:

<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')">
//只能输入汉字: 
<input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))">
//只能输入数字: 
<input onkeyup="value=value.replace(/[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
//只能输入英文和数字: 
<input onkeyup="value=value.replace(/[\W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
//控制输入框只能输入文字或数字,也可以不允许输入特殊字符 
//这里不允许输入如下字符: (像 !@#$%^&* 等)<br> 
<textarea rows=2 cols=20 name=comments onKeypress="if ((event.keyCode > 32 && event.keyCode < 48) || (event.keyCode > 57 && event.keyCode < 65) || (event.keyCode > 90 && event.keyCode < 97)) event.returnValue = false;">
//只禁止空格输入 
onkeyup="value=value.replace(/\s/g,'')" 
//只能输入中文和英文: 
onkeyup="value=value.replace(/[^\a-zA-Z\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\a-zA-Z\u4E00-\u9FA5]/g,''))"

总结

以上所述是小编给大家介绍的JS限制输入框输入的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 单例/单体模式(Singleton)
Apr 07 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
Jun 28 Javascript
JS中实现简单Formatter函数示例代码
Aug 19 Javascript
JavaScript中的6种运算符总结
Oct 16 Javascript
JavaScript中的bold()方法使用详解
Jun 08 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
Dec 14 Javascript
Bootstrap整体框架之JavaScript插件架构
Dec 15 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
vue使用技巧及vue项目中遇到的问题
Jun 04 Javascript
Vue表单demo v-model双向绑定问题
Jun 29 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 Javascript
webpack手动配置React开发环境的步骤
Jul 02 #Javascript
Angularjs中的$apply及优化使用详解
Jul 02 #Javascript
angularjs 的数据绑定实现原理
Jul 02 #Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
Jul 02 #Javascript
vue中的数据绑定原理的实现
Jul 02 #Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 #Javascript
jsonp跨域获取数据的基础教程
Jul 01 #Javascript
You might like
实测在class的function中include的文件中非php的global全局环境
2013/07/15 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
php判断表是否存在的方法
2015/06/18 PHP
解决Yii2邮件发送结果返回成功,但接收不到邮件的问题
2017/05/23 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
php中用unset销毁变量并释放内存
2020/05/10 PHP
PHP实现本地图片转base64格式并上传
2020/05/29 PHP
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
JavaScript中判断函数是new还是()调用的区别说明
2011/04/07 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
javascript在myeclipse中报错的解决方法
2013/10/29 Javascript
js获取html页面节点方法(递归方式)
2013/12/13 Javascript
2014年最火的Node.JS后端框架推荐
2014/10/27 Javascript
Javascript 基础---Ajax入门必看
2016/07/06 Javascript
AngularJS入门教程之静态模板详解
2016/08/18 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
three.js绘制地球、飞机与轨迹的效果示例
2017/02/28 Javascript
babel的使用及安装配置教程
2018/02/22 Javascript
JavaScript之解构赋值的理解
2019/01/30 Javascript
简单上手Python中装饰器的使用
2015/07/12 Python
python动态网页批量爬取
2016/02/14 Python
举例讲解Python中metaclass元类的创建与使用
2016/06/30 Python
Python实现八皇后问题示例代码
2018/12/09 Python
在python下实现word2vec词向量训练与加载实例
2020/06/09 Python
python爬虫如何解决图片验证码
2021/02/14 Python
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
女士鞋子、包包和服装在线,第一款10美元:ShoeDazzle
2019/07/26 全球购物
北京鼎普科技股份有限公司软件测试面试题
2012/04/07 面试题
尊老爱亲美德少年事迹材料
2014/08/14 职场文书
同志主要表现材料
2014/08/21 职场文书
教代会闭幕词
2015/01/28 职场文书
2016春季小学开学寄语
2015/12/03 职场文书
Nginx缓存设置案例详解
2021/09/15 Servers
Python中time标准库的使用教程
2022/04/13 Python
SpringBoot使用ip2region获取地理位置信息的方法
2022/06/21 Java/Android