elementUI + VUE el-input[type=number] 禁止滚动事件隐藏上下箭头

最新推荐文章于 2025-05-07 14:39:07 发布

weixin_30684743

最新推荐文章于 2025-05-07 14:39:07 发布

阅读量898

点赞数

文章标签： javascript ui 前端 ViewUI

原文链接：http://www.cnblogs.com/dyy-dida/p/11496588.html

版权

1.隐藏上下箭头CSS样式

<style>
    input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
        -webkit-appearance:textfield;
    }    
    input[type="number"]{
        -moz-appearance:textfield;
    }
</style>

2.解决谷歌火狐input[type=number]滚动事件

<el-input type="number" v-model="inputNumber" @wheel.native.prevent="stopScrollFun($event)"></el-input>

3.js

      stopScrollFun(evt) {
		evt = evt || window.event;
		if(evt.preventDefault) {
			// Firefox
			evt.preventDefault();
			evt.stopPropagation();
		} else {
			// IE
			evt.cancelBubble=true;
			evt.returnValue = false;
		}
		return false;
	},

　　************@mousewheel.native.prevent 只在谷歌有效果，火狐没反应*******************

关于wheel：https://segmentfault.com/a/1190000017390159?utm_source=tag-newest

转载于:https://www.cnblogs.com/dyy-dida/p/11496588.html