解决element-ui数字输入框的问题

在项目中我们经常会用数字输入框，但element-ui输入框type为number时会出现上下箭头，看起来并不美观

那么我们应该怎么去掉这个呢？
在style里放入以下代码就可解决
代码如下：

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {-webkit-appearance: none;
}
input[type="number"] {-moz-appearance: textfield;
}

后续的几个小问题（输入框内禁止鼠标滚动、数字输入框能输入e的问题）

有时候当我们把输入框设置为number时，我们会发现鼠标滚轮上下滚动，输入框的值也会随之发生变化，有时候我们为了用户体验并不想这么做，那么怎么办呢？请看下面代码

<el-inputv-model.trim="phone"type="number"placeholder="请输入手机号码"@mousewheel.native.prevent
></el-input>

我们在el-input中加入@mousewheel.native.prevent就可以了

当我们把input type值设为number值后，并不代表就只能输入数字了，还有一个特殊的的字符“e”可以输入，我们怎么样也让e不能输入呢？请看下面代码

<el-input
v-model.trim="phone"type="number"placeholder="请输入手机号码"@mousewheel.native.preventonkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
></el-input>

我们在el-input中加入οnkeyup="this.value=this.value.replace(/[^\d.]/g,’’);"就可以了

限制输入框的长度，element input中maxlength=“11”属性在这里好像失效了，我们想让手机号限制在11位数，加入以下代码就可以了

oninput="if(value.length>11)value=value.slice(0,11)"

总结

关于element-ui数字输入框的问题就说到这了
希望对大家有所帮助
欢迎各位大佬补充

解决element-ui数字输入框的问题相关推荐

Element UI 数字输入框的实现
方法一:添加正则校验缺点:需要根据需要变更正则表达式 <template><el-form ref="formRef" :model="formDat ...
elementui文本框换行_解决Element UI input输入框不能使用回车进行搜索
css怎么让输入框不显示光标? css怎么让输入框不显示光标?网上有很多方式:用div模拟,设置readonly,设置disabled,设置自动blur等等方式,发现都不能满足需求,最后还是找到一位大 ...
Element UI——数字输入框解决方案
问题描述当我们开发项目时,常常想限制用户只能输入纯数字: 官方文档 https://element.eleme.cn/#/zh-CN/component/input https://element. ...
解决 element ui 本地使用引入图标不显示 .ttf和.woff 报错问题
解决 element ui 引入在线地址更换为本地地址后 .ttf和.woff 报错问题原因因为文件内缺少两个文件根据控制台提示发现少了.ttf和.woff两个文件 1)element-ico ...
基于Element ui 实现输入框只能输入数字并支持千分位
实现效果设置子组件 <template><el-inputref="money"v-model.trim="money":placehold ...
Vue 篇解决ELement UI 中表单验证(多层Object嵌套)
项目场景: 提示:主要是在 Vue 框架中: 用 Element UI 提供的规则进行表单验证问题描述因为我 data 里面嵌套了多层 Object, 所以 Element UI 提供的表单验证没 ...
解决element UI 表格el-table增加列会震动抖动的问题
beforeUpdate(){this.$nextTick(() => {this.$refs.myTable.doLayout();}) }, 在element UI里面有一个doLayout ...
Vue+Element ui input输入框，扫码枪触发 enter事件，多次快速扫描会出现字符丢失的问题（已解决）
input输入框,扫码枪触发 enter事件,多次快速扫描第二次字符会丢失修改之前代码: 在接口返回过来值之后,将input框值清空掉这样写用键盘enter键快速触发多次,也不会有任何问题,但是 ...
如何解决element ui 表单resetFields 的indexOf报错
如图每个div包裹一个表单每个表单都有清空表单的resetFields方法第一个表单清空不报错第二个及其他都报错了. 我们可以点击去看看由此可以知道这个方法的原理. 我们再去打印一下this ...
Element UI数字组件四舍五入问题及居右显示
1.数字组件会自动进行四舍五入,通过以下方法,可以直接进行位数的截取. <el-input-number v-model="vv" controls-position=&qu ...

解决element-ui数字输入框的问题

解决element-ui数字输入框的问题

后续的几个小问题（输入框内禁止鼠标滚动、数字输入框能输入e的问题）

总结

解决element-ui数字输入框的问题相关推荐

最新文章

热门文章