input输入框number类型去除增减
# input输入框type=number时 去除增减及禁用滚轮事件
# 一、禁用鼠标滚动事件
# 1. 原生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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 2. Vue+ElementUI禁用鼠标滚动事件
<el-input type="number" @mousewheel.native.prevent />
1
# 二、去除增减按钮
// Chrome
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
-webkit-appearance: none !important;
margin: 0;
}
// fireFox
input[type="number"]{-moz-appearance:textfield;}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
上次更新: 10/21/2021, 1:52:09 PM