Solve the input number type scroll up and down to disable wheel event

1. Remove the up and down arrows at the 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. Disable input digital wheel event

<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. When using element-ui + vue, in el-input plus @ mousewheel.native.prevent to stop scrolling mouse

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

4. If necessary to disable and down arrows, can be adopted in the following manner

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

Guess you like

Origin www.cnblogs.com/yaohe/p/11824811.html