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

【注】

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

发表评论

您的电子邮箱地址不会被公开。