简单粗暴实现el-input只允许输入数字

简介: 简单粗暴实现el-input只允许输入数字


<el-input 
@input="phoneNumber=phoneNumber.replace(/[^0-9]/g,'')" 
v-model="phoneNumber"
maxlength="11"
>
</el-input>

如果加入type="number",会在输入框右侧出现这个恶心的东西

尽管可以使用样式来屏蔽掉

>>>input::-webkit-inner-spin-button {
display: none;
}

但是这样会导致maxlength失效,无法限制输入长度,所以推荐用上面的代码

@input="phoneNumber=phoneNumber.replace(/[^0-9]/g,'')"

如果是原生的html就用如下代码

oninput="this.value=this.value.replace(/[^0-9]/g,'')"


相关文章
|
7月前
|
移动开发 JavaScript HTML5
el-input限制输入整数等分析
本文介绍了在Vue中限制el-input只能输入整数的几种方式,包括设置type为number,使用inputmode属性,自定义指令,计算属性,使用onafterpaste和onkeyup事件以及使用el-input-number的precision属性。每种方式都有其优缺点,可以根据实际需求选择合适的方式。比较建议用自定义指令的方式来实现。
1272 0
el-input限制输入整数等分析
|
5月前
el-input 模糊匹配 - 单行输入
el-input 模糊匹配 - 单行输入
32 0
|
7月前
Element - ui :el-input 输入只能是数字并且小数点后只能是1-2位
Element - ui :el-input 输入只能是数字并且小数点后只能是1-2位
3188 1
|
7月前
element-plus 循环生成的多个input输入框如何校验
我们知道正常写出来的input输入框如何校验,那循环出来的输入框应该怎么校验咧,这里就教大家如何的去校验通过循环出来的输入框。
333 0
|
前端开发
input去掉输入框type为number时的上下箭头的实现方法
input去掉输入框type为number时的上下箭头的实现方法
100 0
|
前端开发 数据库
input输入框自动消除空格
input输入框自动消除空格
112 0
el-input输入值无法在输入框显示
el-input输入值无法在输入框显示
104 0
|
前端开发
el-input 限制只能输入正整数
el-input 限制只能输入正整数
235 0
Element-UI中el-input输入值不显示
Element-UI中el-input输入值不显示
429 0