1. 程式人生 > >解決input number類型上下滾動 禁用滾輪事件

解決input number類型上下滾動 禁用滾輪事件

efault 類型 prop cancel input def clas gin val

1.去掉input在type="number"時的上下箭頭

  

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

2.禁用input數字滾輪事件

<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; }

3.使用element-ui+vue時,在el-input加上@mousewheel.native.prevent來阻止鼠標滾動

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

如果還需要禁止上下箭頭,則可采用以下方式

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

解決input number類型上下滾動 禁用滾輪事件