100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > element el-input type=number的时候隐藏上下箭头 并且禁止鼠标滚动改变值 禁止输入e

element el-input type=number的时候隐藏上下箭头 并且禁止鼠标滚动改变值 禁止输入e

时间:2023-07-19 21:12:47

相关推荐

element el-input type=number的时候隐藏上下箭头 并且禁止鼠标滚动改变值 禁止输入e

el-input,type = number 鼠标点击箭头增加减小数值,它的鼠标滚动也会 如图:

两种方法,第一种正常的写:

第一种方法(有bug,可以输入e,第二种可以解决):

// 全局css 加上以下代码,可以隐藏上下箭头// 取消input的上下箭头input::-webkit-inner-spin-button {-webkit-appearance: none !important;}input::-webkit-outer-spin-button{-webkit-appearance: none !important;}input[type="number"]{-moz-appearance: textfield;}

这时候又会发现一个问题,就是输入框我们鼠标滑动的的时候,它会改变input的值,如图:

解决方法:

//bug是可以输入e 第二种方法可以解决<el-input v-model="amount" type="number" @mousewheel.native.prevent@DOMMouseScroll.native.prevent></el-input>

第二种方法(完美解决,代码量也少,直接使用正则即可):

// 注意type类型是text<el-input v-model="amount" type="text" @input="allNumber(amount)" ></el-input><script>export default {data() {return {amount: '',}},methods: {allNumber(value) {value = value.replace(/[^\d]/g,""); //只能输入数字this.amount = value //注意这里是string,你要数字类型记得自己转一下console.log(this.amount)}}};</script>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。