位置: IT常识 - 正文

<input> 实现输入框只能输入数字(个人认为最好的)(input输入语句)

编辑:rootadmin
<input> 实现输入框只能输入数字(个人认为最好的) 需求背景:

推荐整理分享<input> 实现输入框只能输入数字(个人认为最好的)(input输入语句),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:怎么用input输入数据,input输入值,用input输入字符串,用input输入字符串,input输入语句,怎么用input输入数据,怎么用input输入数据,input输入语句,内容如对您有帮助,希望把文章链接给更多的朋友!

在项目中会遇到表单填写的时候在input中输入纯数字的情况,这个时候需要我们在输入框对用户的输入做一些限制,我在网上查了几个方案,我都尝试了一下,优缺点也标注了一下。仅供大家参考:

方案一:使用JS限制 input 输入框只能输入纯数字onkeyup = "value=value.replace(/[^\d]/g,'')"

使用 onkeyup 事件, 缺点: 在中文输入法状态下,输入汉字之后直接回车,会直接输入字母,所以:不推荐

onchange = "value=value.replace(/[^\d]/g,'')"

使用 onchange 事件, 缺点:在输入内容后,只有 input 丧失焦点时才会得到结果,并不能在输入时就做出响应

3、oninput = "value=value.replace(/[^\d]/g,'')"

使用 oninput事件,完美的解决了以上两种问题,他可以即时做出响应, 缺点:当你先输入数字,切输入法中文,开始输入,之前输入的数字会一个个的都消失,直到内容为空

4、最后,我发现了一个功能实现上最好的:同时使用onkeyup="this.value=this.value.replace(/\D/g,'')" + onafterpaste="this.value=this.value.replace(/\D/g,'')"

上面出现的3中情况均完美解决 缺点: 唯一不太行的就是 输入英文或中文是输入框都会频闪一下键盘输入的东西,但还是 可以接受的

方案二:VUE使用a-input-number组件限制 input 输入框只能输入纯数字利用a-input-number组件的controls属性api去控制不显示增减数值的按钮

缺点:当你输入中文或英文时,只有在输入框失去焦点 的时候才会去校验数字

方案三:VUE使用a-input组件利用type=number限制 input 输入框只能输入纯数字<input> 实现输入框只能输入数字(个人认为最好的)(input输入语句)

当input 使用了type='number’后,会出现这个增减数值的按钮,这里建议使用css去控制不显示:

<a-input type='number' />// css部分 需要注意浏览器兼容问题<style lang="css" scoped>input::-webkit-outer-spin-button,input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0;}/* 火狐 */input { -moz-appearance: textfield;}

缺点:就是你输入中文或者英文他会直接拼接一个 'e' 或 'E',所以:‘不推荐’

总结:最最最后,个人感觉使用JS的方案四比较合适

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

<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">浅浅扩展一下:

JS判断只能是数字和小数点

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

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

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

<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='';}">

数字和小数点方法二<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}"/>只能输入字母和汉字

<input onkeyup="value=value.replace(/[\d]/g,'')"onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))"maxlength=10 name="Numbers">

只能输入英文字母和数字,不能输入中文

<input onkeyup="value=value.replace(/[^\w\.\/]/ig,'')">

只能输入数字和英文

<input onKeyUp="value=value.replace(/[^\d|chun]/g,'')">

小数点后只能有最多两位(数字,中文都可输入),不能输入字母和运算符号:

<input onKeyPress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 || /\.\d\d$/.test(value))event.returnValue=false">

小数点后只能有最多两位(数字,字母,中文都可输入),可以输入运算符号:

<input onkeyup="this.value=this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')">

只能是数字和小数点和加减乘除

onkeypress="return event.keyCode>=4&&event.keyCode<=57"

本文链接地址:https://www.jiuchutong.com/zhishi/299414.html 转载请保留说明!

上一篇:Vue学习——【第四弹】(vue系列教程)

下一篇:流程图拖拽视觉编程--概述(用流程图的形式写出视觉的形成过程)

  • 苹果手机抖音数据分析在哪里看(苹果手机抖音数据分析怎么关闭)

    苹果手机抖音数据分析在哪里看(苹果手机抖音数据分析怎么关闭)

  • 微信把对方拉黑了怎么加回来(微信把对方拉黑了还能看到朋友圈吗)

    微信把对方拉黑了怎么加回来(微信把对方拉黑了还能看到朋友圈吗)

  • 华为p20pro能用5g吗(华为p20pro能用广电卡吗)

    华为p20pro能用5g吗(华为p20pro能用广电卡吗)

  • vf是什么电压(dc稳压器是什么)

    vf是什么电压(dc稳压器是什么)

  • 一体机能换电池吗(一体机能换电池不)

    一体机能换电池吗(一体机能换电池不)

  • 微信清除数据聊天记录还有吗(微信清除数据聊天记录没了怎么办)

    微信清除数据聊天记录还有吗(微信清除数据聊天记录没了怎么办)

  • 华为nova7pro屏幕刷新率多少赫兹(华为nova7pro屏幕多大)

    华为nova7pro屏幕刷新率多少赫兹(华为nova7pro屏幕多大)

  • 一直来电管家是拉黑了嘛(为什么打电话说来电管家是什么意思)

    一直来电管家是拉黑了嘛(为什么打电话说来电管家是什么意思)

  • 苹果x电池健康度85%要换吗(苹果x电池健康78还能用多久)

    苹果x电池健康度85%要换吗(苹果x电池健康78还能用多久)

  • pcam10是什么型号oppo什么型号(pcam10是什么型号的手机长什么样)

    pcam10是什么型号oppo什么型号(pcam10是什么型号的手机长什么样)

  • 手机距离感应器坏了对手机有什么影响(手机距离感应器维修多少钱)

    手机距离感应器坏了对手机有什么影响(手机距离感应器维修多少钱)

  • 手机开不开机充电没反应(手机开不开机充电也没反应怎么办)

    手机开不开机充电没反应(手机开不开机充电也没反应怎么办)

  • 腾讯旗下有哪些直播平台(腾讯旗下有哪些短视频软件)

    腾讯旗下有哪些直播平台(腾讯旗下有哪些短视频软件)

  • 手机总是卡住怎么回事(手机老是卡住不动了怎么办)

    手机总是卡住怎么回事(手机老是卡住不动了怎么办)

  • 手机qq的账号怎么删除(手机qq账号怎么退出登录)

    手机qq的账号怎么删除(手机qq账号怎么退出登录)

  • 苹果蓝牙耳机手势操作(苹果蓝牙耳机手机没有弹窗怎么回事)

    苹果蓝牙耳机手势操作(苹果蓝牙耳机手机没有弹窗怎么回事)

  • ps分辨率的单位是什么(ps分辨率单位2怎么去掉)

    ps分辨率的单位是什么(ps分辨率单位2怎么去掉)

  • 苹果11是全面屏吗(苹果11全面屏怎么操作)

    苹果11是全面屏吗(苹果11全面屏怎么操作)

  • word文档怎么换行(word文档怎么换页)

    word文档怎么换行(word文档怎么换页)

  • 华为手机锁屏显示农历(华为手机锁屏显示7786什么意思)

    华为手机锁屏显示农历(华为手机锁屏显示7786什么意思)

  • IE总是阻止页面内容(ie浏览器阻止)

    IE总是阻止页面内容(ie浏览器阻止)

  • 简单的随机乱码生成(验证码生成)| HTML(简单的随机乱码怎么解决)

    简单的随机乱码生成(验证码生成)| HTML(简单的随机乱码怎么解决)

  • Qt+OpenCV(一)Qt基础操作和使用opencv初识(qt+opencv教程)

    Qt+OpenCV(一)Qt基础操作和使用opencv初识(qt+opencv教程)

  • 浙江增值税专用发票几个点
  • 以前年度损益结转到未分配利润
  • 货运代理费属于运费还是其他
  • 维修费开票属于哪个大类
  • 自产自用应税消费品的消费税,其纳税环节
  • 固定资产清理属于流动资产吗
  • 购买固定资产时的运费
  • 一般纳税人购进免税农产品如何抵扣进项税额
  • 垃圾处理的公司有哪些
  • 购买大型设备的会计科目
  • 报税时其他收入
  • 事业单位支付方式
  • 房开企业增值税确认收入时间
  • 长期股权投资权益法初始计量
  • 附加税零申报怎么申报
  • 新开的公司会计需要做什么
  • 个人所得税的税收标准
  • 小企业存货有哪些
  • 怎样找此电脑
  • 一般纳税人接受固定资产投资时相关的科目可能有
  • 股东向公司借款合法吗
  • 文竹发黄怎么挽救?
  • 劳务派遣发票会扣税吗
  • 企业重组的特殊性税务处理 税屋
  • 小程序自定义tabbar创意动画
  • 售后回租融资租赁案例
  • 附加税申报错误,已缴费,怎么办
  • mavon-editor的使用
  • opencv的函数
  • php socket编程
  • ussd命令
  • 帝国cms怎么上传图片
  • 帝国cms栏目可以看吗
  • 帝国cms适合建什么站
  • 应收账款转回坏账怎么办
  • 企业增值税发票管理办法
  • 高效快速编制会计分录如何做?
  • 公司销售自己使用过的固定资产
  • 小规模纳税人营业额
  • 房地产拆迁补偿协议
  • 对公账户往来款需要归还吗
  • 资产减值损失属于
  • 劳务税能退税吗
  • sqlserver数据库作业
  • 记账凭证基本内容口诀
  • 税法对工资薪金的要求
  • 年底要结转净利润怎么算
  • 定期定额户超过9万如何交个税
  • 差额发票如何做账
  • 上年度财务费用会计分录
  • 财务费用利息属于什么科目
  • 非居民企业股权转让特殊性税务处理
  • 社保逾期滞纳金和利息
  • 待摊费用和预付费用的区别
  • 工程项目预缴税率
  • 公司买空调算什么费用
  • 购入固定资产一次性扣除政策
  • 会计调账是什么意思
  • mysql -ne
  • mysql中的where子句
  • Windows 8.1下MySQL5.7 忘记root 密码的解决方法
  • 懒癌患者如何自救
  • solaris安装教程
  • winpe安装步骤
  • linux中w命令详解
  • 电脑怎么装双系统win10和linux
  • win8怎么调出任务栏
  • 怎么从win8装回win7
  • unity shader editor
  • perl的哈希
  • Android多线程开发
  • django实时刷新日志前端
  • 木瓜电子
  • jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
  • unityshader插件
  • javascript怎么学好
  • 税务局遴选能去什么单位
  • 非经营性房屋具体指哪些?
  • 湖南省税局
  • 广西残疾人保障金比例
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设