【注】
- 虽然使用的是
Vue + Ant Design框架，但是对于原生的HTML + JavaScript也是有效的，毕竟VUE只是一个JS前端框架。 onmousewheel已过时。不推荐使用onmousewheel属性，而应使用onwheel属性（HTML5的新属性）；Vue中对应的则是使用@wheel，而不是@mousewheel。
VUE + Ant Design
<!-- 输入框组件：a-input 为 Ant Design 的 UI 组件，换成 input 也可以 -->
<a-input type="number" placeholder="请输入支付金额" @wheel="disableWheel"/><!-- 加减按钮处理 -->
<style>
/deep/ input::-webkit-outer-spin-button,
/deep/ input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
/deep/ input[type="number"] {
-moz-appearance: textfield;
}
</style><script>
export default {
name: 'HelloWorld',
methods:{
disableWheel: function (evt) {
// 禁用滚轮
evt = evt || window.event
if (evt.preventDefault) {
// Firefox + Chrome + Safari
evt.preventDefault()
evt.stopPropagation()
} else {
// IE
evt.cancelBubble = true
evt.returnValue = false
}
return false
}
}
}
</script>HTML + CSS + JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style rel="stylesheet">
<!-- 加减按钮处理 -->
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"] {
-moz-appearance: textfield;
}
</style>
</head>
<body>
<input type="number" placeholder="请输入支付金额" onwheel="disableWheel()"/>
<script type="text/javascript">
let disableWheel = function (evt) {
// 禁用滚轮
evt = evt || window.event
if (evt.preventDefault) {
// Firefox + Chrome + Safari
evt.preventDefault()
evt.stopPropagation()
} else {
// IE
evt.cancelBubble = true
evt.returnValue = false
}
return false
}
</script>
</body>
</html>