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

最新推荐文章于 2024-02-22 21:45:00 发布

Roc.Chang

最新推荐文章于 2024-02-22 21:45:00 发布

阅读量3.3k

点赞数 1

分类专栏：前端 # VUE # JQuery 文章标签： Vue 数字输入框 HTML 5 前端开发

本文链接：https://blog.csdn.net/peng2hui1314/article/details/123761991

版权

前端同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

VUE

4 篇文章 0 订阅

订阅专栏

JQuery

3 篇文章 0 订阅

订阅专栏

虽然使用的是 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” 时去掉浏览器的加减按钮和鼠标滚轮事件

Roc.Chang

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue 当输入框 type=“number“ 时去掉浏览器的加减按钮和鼠标滚轮事件

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

扫一扫