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

本文介绍了如何在使用Element UI的el-input组件,type设置为number时,禁用上下箭头并防止鼠标滚动改变数值,同时解决了输入'e'导致的异常问题。提供了两种解决方案,第二种方法通过正则表达式完美解决该问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值