Vue 当输入框 type=“number“ 时去掉浏览器的加减按钮和鼠标滚轮事件

【注】- 虽然使用的是 `Vue + Ant Design` 框架，但是对于原生的 `HTML + JavaScript` 也是有效的，毕竟 `VUE `只是一个 `JS` 前端框架。- `onmousewheel` 已过时。不推荐使用 `onmousewheel` 属性，而应使用 `onwheel` 属性（ `HTML5` 的新属性）；`Vue` 中对应的则是使用 `@wheel`，而不是 `@

Roc.Chang

3560人浏览 · 2022-03-30 23:58:46

Roc.Chang · 2022-03-30 23:58:46 发布

虽然使用的是 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>

Roc’s Blog：Vue 当输入框 type=“number” 时去掉浏览器的加减按钮和鼠标滚轮事件

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^