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

目录

  • VUE + Ant Design
  • HTML + CSS + JavaScript

【注】

  • 虽然使用的是 Vue + Ant Design 框架,但是对于原生的 HTML + JavaScript 也是有效的,毕竟 VUE只是一个 JS 前端框架。
  • onmousewheel 已过时。不推荐使用 onmousewheel 属性,而应使用 onwheel 属性( HTML5 的新属性);Vue 中对应的则是使用 @wheel,而不是 @mousewheel

VUE + Ant Design


<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>Titletitle>
    <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,#,JQuery,Vue,数字输入框,HTML,5,前端开发)