input type='number' 去掉加减按钮并禁止鼠标滚轮滚动

luckybing~

于 2019-07-10 11:12:58 发布

阅读量4.4k

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Luckyzhoufangbing/article/details/95317340

博客介绍了在Vue Element中遇到问题的解决办法，一是通过添加CSS样式去掉某些内容，二是针对鼠标滚动时手机号码加一减一的问题，需给input增加滚动阻止事件。

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

去掉方法：添加css样式

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}

解决～

但是还有一个问题就是鼠标滚动的时候，手机号码还会加一减一，这时需要给input增加滚动阻止事件。

@mousewheel.native.prevent

vue element 中

<el-input
  v-model="formInline.sellerMobile"
  placeholder="请输入商家手机号"
  type='number'
  @mousewheel.native.prevent
  oninput='if(value.length>11)value=value.slice(0,11)'
></el-input>