Element UI 禁用数字输入框组件添加鼠标滚动事件

最新推荐文章于 2024-04-29 16:20:12 发布

牛马狗猪猴

最新推荐文章于 2024-04-29 16:20:12 发布

阅读量749

点赞数 2

文章标签：前端

本文链接：https://blog.csdn.net/weixin_45730866/article/details/134502166

版权

Element UI 禁用数字输入框组件添加鼠标滚动事件

 <el-input 
 	type="number"  
 	@mousewheel.native.prevent   
 	@DOMMouseScroll.native.prevent 
 	:min="0" 
 	onkeyup="this.value=this.value.match(/\d+\.?\d{0,2}/);"
    v-model="form.threeYearDevelopCost"></el-input>

@mousewheel.native.prevent //谷歌浏览器禁止滚轮滚动修改数据
@DOMMouseScroll.native.prevent //火狐浏览器禁止滚轮滚动修改数据

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

牛马狗猪猴

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

【Vue3 + Element Plus】InputNumberRange 数值范围输入框组件

Komorebi_00的博客

07-10

2395

数值范围输入框组件

Element-ui组件学习（input输入框）

elodie2048的博客

11-16

885

基础用法禁用状态可清空 App.vue <template> <div id="app"> <el-input placeholder="请输入内容" v-model="input" clearable> </el-input> {{ input }} </div> </template> <script> import ElInput from

参与评论您还未登录，请先登录后发表或查看评论

el-input 只写数字并且隐藏滚轮禁止鼠标滚动事件

努力搬砖的小码

08-27

1061

el-input 只写数字

react：antd中Input 或 InputNumber 数字类型禁用鼠标滚动时值自动变化解决方案

刻痕

04-10

721

## react：antd中Input 或 InputNumber 数字类型禁用鼠标滚动时值自动变化解决方案记录antd版本：v4 这是一个很隐蔽的bug，仅输入框聚焦后鼠标滑动经过输入框时，输入框的值会自动加减。不聚焦、不经过输入框不显示。 **解决方案：** 1. 不使用 Input 组件设置 type="number"，改用 InputNumber 2. InputNumber 组件时，一定不要设置：type="number" 经测试，antd的

如何禁止element-ui 标签页组件的点击事件？

热门推荐

dcxia89的博客

08-07

1万+

项目中也许会有这种需求：element-ui 标签页组件只能通过代码切换，不能通过点击切换tab！自己尝试了元素 js 获取元素后再清除绑定事件，失败。。。获取元素为 null 网上找了一大堆，也许你会发现这样的答案： <p @click="flag && clickEvent()"></p> 加上一个标志位来控制点击事件是否能触发。但是这仅仅...

el-input type=“number 禁止鼠标滚动改值

不使疯

04-29

563

解决方法：在el-input中添加属性设置 @mousewheel.native.prevent。

elment-ui+vue实现鼠标事件-坑！

weixin_34200628的博客

11-16

2424

elment-ui中的input是进行封装过得，所以要加上.native.<el-form-item> <el-input @keyup.enter.native="keySubmitBtn" type="password" ></el-input></el-form-item>注意：我一开始用的button按钮实现的登录功能，其实我们的in...

vue使用element-ui的el-input监听不了回车事件的解决方法

08-28

小编在使用element-ui时，el-input组件监听不了回车事件，怎么回事呢？下面小编给大家带来了vue使用element-ui的el-input监听不了回车事件的解决方法，一起看看吧

解决element ui select下拉框不回显数据问题的解决

10-17

在开发Vue.js应用时，Element UI是一个常用的组件库，提供了丰富的UI组件，其中包括`el-select`下拉选择框。然而，在实际使用过程中，有时会遇到`el-select`无法正确回显已选择数据的问题。本篇文章将深入探讨这个...

element ui 输入框 只读

最新发布

07-04

在Element UI的`el-input`组件中，如果你想创建一个只读的输入框，你可以设置其`readonly`属性。这是Vue 2中Element UI的用法[^1]: ```html <el-input v-model="inputValue" readonly></el-input> export ...

elementUI使用[input=number]怎么禁止鼠标滚动时，输入框数据改变

Alive_tree的博客

09-27

2670

我们写表单的时候，有时候需要数据是number类型的，由于默认是string类型的，因为我们需要定义一下type=number <el-form-item key="data" label="数值" prop="data"> <el-input @mousewheel.native.prevent //谷歌浏览器禁止滚轮滚动修改数据 @DOMMouseScroll.native.prevent //火狐浏览器禁止滚轮滚动修改数据 type

elementuitabs组件鼠标滑过触发

qq_41974582的博客

09-01

575

elementuitabs组件hover事件触发,鼠标滑过使用mouseover实现

vue antd input type=“number“ 如何禁止输入+-符号以及如何禁止滚轮滚动数字变动事件

suimengfeiyang123的博客

01-19

794

if (keyCode === 189 || keyCode === 109|| keyCode === 107|| keyCode === 69|| keyCode === 187) { // -键对应的keycode为189或者109，+键对应的keycode为107或者187。// 阻止默认事件发生。

element ui 滚动条

西瓜

03-30

491

<el-container direction="vertical" style="height:350px;border: 1px solid #eee"> <el-header height="30px"> <span style="font-weight: bold;font-size: 14px;"> 企业号，企业名称，服务器地址 </span> </el-header> <el-main&g.

el-input是number类型时，取消上下箭头和鼠标滚轮事件，不用批量修改。

m0_62087405的博客

02-22

1514

可以通过在Vue实例中添加一个全局事件监听器来实现。但是这个标签的上下箭头很丑在app.less，全局样式中加此代码可以去掉。项目中经常用到金额的输入框，会用到el-input标签。去调这个输入框的鼠标滚动就增减数字的默认事件 2种写法。这种方法需要用到的地方批量修改，比较麻烦。

iview elementui 输入框 number类型数字输入框去掉滚动事件

qq_43017024的博客

09-16

873

iview elementui 输入框 number类型数字输入框去掉滚动事件。

number类型的input框禁止滚动数字

IT界泥石流

11-08

889

1,css不显示右侧按钮 input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{ -webkit-appearance: textfield; } input[type="number"]{ -moz-appearance: textfield; }...

input设置type为number,禁止输入e等符号,去除上下箭头

zennnlee的博客

04-17

3908

【代码】input设置type为number,禁止输入e等符号,去除上下箭头。

禁止input输入框的鼠标滚轮事件详解

樊小书生

02-18

8710

现代浏览器发展的越来越智能，新增了很多的效果，比如说input输入框，当将其type设置为number的时候，在其获得焦点的时候，滚动鼠标的滚轮可以增加其数值，，但在有些情况的时候并不太适合，比如说在表单中，当表单比屏幕高度大的时候，上面的填完填写下面的内容的时候，一般人都是直接滚动鼠标滚轮来滚动液面，但是如果某个number输入框还在焦点的时候，滚动滚轮会使其数值改变，这个一般都是不希望的，所以需要禁止掉滚动事件。