解决input输入框type=number时候去除增减按钮 禁用滚轮事件

1,禁用滚轮事件

<input type="number" onmousewheel="stopScrollFun"  onDOMMouseScroll="stopScrollFun"/>

function stopScrollFun(evt) {  
  evt = evt || window.event;  
    if(evt.preventDefault) {  
    // Firefox  
      evt.preventDefault();  
      evt.stopPropagation();  
    } else {  
      // IE  
      evt.cancelBubble=true;  
      evt.returnValue = false;  
  }  
  return false;  
}

2,使用element-ui+vue时,在el-input加上@mousewheel.native.prevent来阻止鼠标滚动

<el-input type="number" @mousewheel.native.prevent />

3,如果还需要禁止上下箭头,则可采用以下方式

谷歌:
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
   -webkit-appearance: none !important;
   margin: 0;
}
火狐:
input[type="number"]{-moz-appearance:textfield;}

出自:https://www.cnblogs.com/yuzihong/p/10212518.html

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值