位置: 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系列教程)

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

  • 微信响了一声但是打开没有来消息(微信响一声但是没信息)

    微信响了一声但是打开没有来消息(微信响一声但是没信息)

  • wps复制过来的文字间距不一样,如何改(wps复制过来的文字间隔大但又不是空格)

    wps复制过来的文字间距不一样,如何改(wps复制过来的文字间隔大但又不是空格)

  • e000302-0001怎么清除(e002-0000怎么清除)

    e000302-0001怎么清除(e002-0000怎么清除)

  • 文档怎么把字体放大(文档怎么把字体拉长)

    文档怎么把字体放大(文档怎么把字体拉长)

  • 华为手表怎么充电呢(华为手表怎么充值支付宝)

    华为手表怎么充电呢(华为手表怎么充值支付宝)

  • qq一会在线一会离线是什么意思(qq一会在线一会离线请留言)

    qq一会在线一会离线是什么意思(qq一会在线一会离线请留言)

  • 在另一个手机登qq有聊天记录吗(在另一个手机登录微信后,原来的手机再登需要密码吗)

    在另一个手机登qq有聊天记录吗(在另一个手机登录微信后,原来的手机再登需要密码吗)

  • 光纤可以直接接路由器吗(光纤可以直接接电话吗)

    光纤可以直接接路由器吗(光纤可以直接接电话吗)

  • hdgraphics是什么显卡(hd graphic)

    hdgraphics是什么显卡(hd graphic)

  • 抖音下载的视频怎么把水印去掉(抖音下载的视频如何去掉抖音水印)

    抖音下载的视频怎么把水印去掉(抖音下载的视频如何去掉抖音水印)

  • oppoa33为什么总显示空间不足(oppo手机为什么老)

    oppoa33为什么总显示空间不足(oppo手机为什么老)

  • 候补订单购票几率大吗(候补购票多久能买到票)

    候补订单购票几率大吗(候补购票多久能买到票)

  • 抖音里面隐藏的无效视频什么意思(抖音里面隐藏的视频过后能删掉吗)

    抖音里面隐藏的无效视频什么意思(抖音里面隐藏的视频过后能删掉吗)

  • 京东货到付款钱给谁(京东货到付款钱多久到账)

    京东货到付款钱给谁(京东货到付款钱多久到账)

  • wps怎么替换字(wps怎么替换字体格式)

    wps怎么替换字(wps怎么替换字体格式)

  • 爱天使电话手表卡怎么装(爱天使电话手表怎么调时间和日期)

    爱天使电话手表卡怎么装(爱天使电话手表怎么调时间和日期)

  • 键盘ent键是什么意思(键盘entf)

    键盘ent键是什么意思(键盘entf)

  • 服务器是不是电脑主机(服务器是网络吗)

    服务器是不是电脑主机(服务器是网络吗)

  • 红米note8pro隐藏功能(红米note8pro隐藏的应用怎么找出来)

    红米note8pro隐藏功能(红米note8pro隐藏的应用怎么找出来)

  • 分辨率300dpi什么意思(分辨率300dpi是英寸还是厘米)

    分辨率300dpi什么意思(分辨率300dpi是英寸还是厘米)

  • 麒麟810和麒麟980的区别(麒麟810和麒麟980差多少)

    麒麟810和麒麟980的区别(麒麟810和麒麟980差多少)

  • 苹果macOS 10.15.6值得升级吗?苹果macOS 10.15.6更新详细介绍(苹果macOS 13.3 RC 发河北承德市承德县华夏电器)

    苹果macOS 10.15.6值得升级吗?苹果macOS 10.15.6更新详细介绍(苹果macOS 13.3 RC 发河北承德市承德县华夏电器)

  • 附加税计提会计科目
  • 公司名下的车怎么报废
  • 所得税季报季末人数怎么计算
  • 企业所得税包含哪些税种
  • 公司出售旧汽车要交什么税
  • 车间加班视频
  • 银行开户费用计入
  • 2019年工会经费新规定
  • 搬家费账务处理
  • 一般纳税人固定资产怎么入账
  • 房地产企业土地增值税
  • 进口增值税抵扣信息委托核查函
  • 退税 增值税
  • 年度结转之前需要做什么
  • 银行提供服务收费标准
  • 海关进口关税专用缴款书可以抵扣增值税吗
  • 专用设备抵免企业所得税目录
  • 自制半成品具体如何处理账务?
  • 发票的单价开得太低了怎么办?
  • 劳务分包有执照没资质能开票吗?
  • 个人利息收入交不交增值税
  • 小规模企业资本结构
  • 分期收款如何确认成本
  • 库存与账面不符怎么办
  • 银行承兑汇票保证金是什么意思
  • 法院扣款图片
  • 我想看一下这个月几日
  • Win10 64位正式版系统安装方法全过程图解(U大师)
  • 全免增值税企业有哪些
  • RegSrvc.exe - RegSrvc是什么进程 有什么用
  • 获取url的参数有哪些方法
  • 苹果推送最新系统
  • 电梯安装包工头赚多少
  • 有进项没销项怎么处理,可以结转成本吗
  • 收到退回的保证金
  • 销售佣金在所得税里扣吗
  • 购入固定资产如何折旧
  • 魅族路由器mini padavan
  • phpstudy安装配置
  • 固定资产减少的账务处理
  • php字符串比较函数怎么写
  • nginx怎么运行php
  • 金融企业的代理业务
  • phpcms v9 getshell
  • 用友财务软件怎么下载到电脑
  • 其他权益工具投资是金融资产吗
  • 不能加计扣除的研发费用在辅助账怎么反映
  • php文件缓存类
  • PostgreSQL教程(一):数据表详解
  • 原来的预提费用取消后放哪里
  • 知道商品的进价怎么定售价
  • 简易征收为什么要进项税转出呢
  • 商场返现活动怎么入账
  • 毛利差怎么计算公式
  • 工资分摊计提分配方式?
  • 利息支出税前扣除的规定
  • 固定资产明细账图片
  • 存储过程实现业务逻辑
  • mysql教程入门
  • 在linux操作系统中
  • centos下载命令
  • freebsd使用
  • 进程audiodg.exe
  • 快捷图标小箭头怎么恢复
  • linux进程详解
  • 凭据管理器 win10
  • [置顶] 关于UNITY5.0和高通AR4.2.3在手机上白屏的问题
  • unity自带的代码编辑器
  • js 操作excel
  • unity3d的游戏
  • linux rsync命令详解
  • javascript点击切换div内容
  • shell中的注释用什么表示
  • 教你学python
  • python运行flask
  • 税务上征信
  • 税收六大体系和六大能力基层
  • 怎么查询高速路封闭和开通
  • 个体工商户如何申报个税
  • 局党组中心组成员
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设