问题描述

当我们开发项目时，常常想限制用户只能输入纯数字:

官方文档

https://element.eleme.cn/#/zh-CN/component/input

https://element.eleme.cn/#/zh-CN/component/input-number

解决方案

方法一：el-input + 正则表达式

只需要在el-input标签添加代码,如下图所示:

代码如下图

<el-form-item label="角色Id*" class="redItem"><el-input type="text" onkeyup="value=value.replace(/[^\d]/g,'')" size="small" width="50" v-model="editRoleParam.roleID" placeholder="请输入数字"></el-form-item>

可以通过给input 添加onkeyup事件来实现

当输入值的键盘抬起时触发这个事件。this.value表示此输入框的值，/\D/g为正则表达式，用来匹配所有非数字字符；

此句功能为：将输入值为非数字的字符替换为空；

placeholder属性是当input框为空时显示的文字提示;

方法二：el-input-number

                    <el-input-numbersize="mini"style="width: 130px"v-model="user.coin":controls="false"placeholder="请输入硬币数量"></el-input-number>

仅允许输入标准的数字值，可定义范围

注：不能带 icon

参考文章

https://www.jianshu.com/p/37ff53584c41

https://juejin.im/post/5ce77ebcf265da1b9612de0a

Element UI——数字输入框解决方案相关推荐

Element UI 数字输入框的实现
方法一:添加正则校验缺点:需要根据需要变更正则表达式 <template><el-form ref="formRef" :model="formDat ...
基于Element ui 实现输入框只能输入数字并支持千分位
实现效果设置子组件 <template><el-inputref="money"v-model.trim="money":placehold ...
elementui文本框换行_解决Element UI input输入框不能使用回车进行搜索
css怎么让输入框不显示光标? css怎么让输入框不显示光标?网上有很多方式:用div模拟,设置readonly,设置disabled,设置自动blur等等方式,发现都不能满足需求,最后还是找到一位大 ...
Element UI数字组件四舍五入问题及居右显示
1.数字组件会自动进行四舍五入,通过以下方法,可以直接进行位数的截取. <el-input-number v-model="vv" controls-position=&qu ...
Vue+Element ui input输入框，扫码枪触发 enter事件，多次快速扫描会出现字符丢失的问题（已解决）
input输入框,扫码枪触发 enter事件,多次快速扫描第二次字符会丢失修改之前代码: 在接口返回过来值之后,将input框值清空掉这样写用键盘enter键快速触发多次,也不会有任何问题,但是 ...
element ui el-input输入框type=number去掉上下箭头
使用vue框架写法 <div class="container"><el-input v-model="value" type="n ...
element UI——input输入框只读不写需求设置
在 el-input标签内添加readonly属性: <div><p><strong>截至此时,本次按月补贴决算总金额为:</strong></p ...
Vue + Element UI——滚动条el-scrollerbar和无限滚动指令v-infinite-scroll整合解决方案
基本概念 el-scrollbar:Element UI隐藏组件. 注意事项: 1.el-scrollbar的父层要有固定高度 2.el-scrollbar的高度要设成100% 3.如果出现横滚动条, ...
Vue + Bootstrap|Element UI——模态框被遮罩层遮盖问题解决方案
问题描述问题分析 1)若dialog弹出框,它的遮罩层就会被插入到body标签下(即与组件所在的最外层div同一层级) Element UI中设置了modal-append-to-body='tru ...

Element UI——数字输入框解决方案