Element-ui input 输入框限制只能输入数字的问题
需求说明
后台管理系统,使用element-ui el-input组件,要求只能输入数字,最先使用的办法:
<el-inputv-model.number='count'type='number'maxLength='9'
/>
复制代码
存在的问题
1. maxLength不生效
2. 可以输入e
3. 可以输入1.1.....11...1
复制代码
目前解决的办法(可以生效)
<el-inputv-model='count'oninput="value=value.replace(/[^\d]/g,'')"maxLength='9'
/>
复制代码
目前存在的问题
用正则限制了只能输数字后,如果某次操作输入的是中文,会导致后续再输入数字,
也无法更新v-model的值,如下图看了源码得知当 isOnComposition === true 时,是不会去更新值的;
复制代码
拓展
保留小数点后几位
复制代码
<el-inputv-model='number'oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+3)}"maxLength='9'
/>
复制代码
v-model没有值的的问题我是这么解决的
<el-inputv-model='count'ref='ele'oninput="value=value.replace(/[^\d]/g,'')"maxLength='9'
/>const elem = this.$refs.ele
if(elem.isOnComposition) { // em..其实这个判断可以去了this.count = elem.currentValue
}
Element-ui input 输入框限制只能输入数字的问题相关推荐
- input输入框限制只能输入数字的方法
在项目中会遇到表单填写的时候在input中输入纯数字的情况,这个时候需要我们在输入框对用户的输入做一些限制 1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup=&quo ...
- input输入框限制只能输入数字
昨天博主接到一个需求说form表单里面的input输入框有些你得给它限制一下,不要比如有些限制一下只能让他输入数字,不能让客户输入文字或者英文 我这边给大家提供两种方法来实现这个功能,当然,我把相关情 ...
- 输入框内只能输入数字,输入其他内容不显示
JavaScript中Event.returnValue属性 : 该属性是设置或者获取事件的返回值,Event对象的returnValue属性的值一般是true,即脚本处理完自己的工作后由元素处理事件 ...
- 关于element-ui的输入框限制只能输入数字的问题
关于element-ui的输入框限制只能输入数字的问题 这个问题我使用过很多办法,每一种都去尝试,但是结果都不太理想 比如以下的几种方法 注:我要的效果是,输入框内只可输入数字,除了数字其他什么都不可 ...
- elementui文本框换行_解决Element UI input输入框不能使用回车进行搜索
css怎么让输入框不显示光标? css怎么让输入框不显示光标?网上有很多方式:用div模拟,设置readonly,设置disabled,设置自动blur等等方式,发现都不能满足需求,最后还是找到一位大 ...
- 输入框限制只能输入数字,正数、负数、0,最多两位小数;数字输入框可以输入负数,并最多保留两位小数;el-number-input去掉四舍五入和自动补齐小数;
场景: –要求1:输入框只能输入数字,可以使正数.负数.0,小数点最多保留两位. –要求2:不需要自动补齐小数点,也不需要自动四舍五入. element-ui的数字输入框el-input-number ...
- input 输入框限制只能输入两位有效小数
前端入门即教学,今天博主分享几个前端金额实用的小案例,复制拿过去就能用哦! 相信有很多前端小伙伴在工作中遇到过这样的需求,就是限制输入框内容只能输入两位小数吧,想了用正则但是又不知道怎么下手的同学,接 ...
- vue中,input输入框只允许输入数字
在vue项目中,输入框只允许输入数字,现将自己使用的一种方法记录,以供大家参考 这里需用到vue修饰符 不了解的同学可去vue官网看看,或者百度看看其他文档的讲解. .number 如果想自动将用户的 ...
- element-ui输入框限制只能输入数字一系列问题
el-input 限制只能输入数字 οninput="value=value.replace(/^\.+|[^\d.]/g,'')" maxlength="11" ...
最新文章
- 解决Git Revert操作后再次Merge代码被冲掉的问题
- python不断刷新网页_python使用多线程不断刷新网页的方法
- ExecutorService生命周期
- 通过 Docker 部署 Redis 6.x 集群
- Theano 更多示例
- python画饼图_百度飞桨PaddlePaddle之[Python小白逆袭大神]7天训练营
- pytorch中的参数初始化方法
- sdoi2017 r1 不堪回首
- python连接ssh_使用Python连接到SSH
- 第十五章:使用SpringBoot validator让数据更真实
- TCP发送接收数据2
- Kaggle 机器学习实战 朴素贝叶斯(原理+西瓜数据集实战)
- UPnP 协议栈的威胁分析及防范方案
- 哔哩哔哩mac客户端!亲测!支持big sur系统
- Discuz!论坛教程之去掉帖子列表页的附件图标的方法
- 岭回归(Ridge Regression)、OLS和吉洪诺夫正则化(Тихонов regularization)
- 计算机保研个人简介,保研个人简历模板
- 2021年又一深圳程序员猝死,7大信号助你提前预警《打工人的那些事》
- 互联网金融消费利用场景化带动行业发展趋势
- Contents mismatch at: 08000000H (Flash=FFH Required=00H) ! Too many errors to display !
热门文章
- Multi-Scale Metric Learning for Few-Shot Learning(用于小样本学习的多尺度度量学习)
- 数据库作业:SQL练习1 - CREATE / DROP / ALTER
- 图像处理里的简单白平衡算法
- 【蓝桥杯】BASIC-3 字母图形
- 动手学深度学习(pytorch版)d2lzh_pytorch导入问题汇总
- go语言socket编程
- Notepad操作指南
- notepad++设置中文刷新后还是英文解决方法
- 王者荣耀静态页面头部代码设计(1)
- matlab读不了视频,matlab读视频的问题