简单粗暴实现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,'')"


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