el-input-number 失去焦点blur事件，

最新推荐文章于 2024-06-21 16:11:55 发布

我不后悔选了劫

最新推荐文章于 2024-06-21 16:11:55 发布

阅读量2.8k

点赞数 4

文章标签： vue.js 前端 javascript elementui

本文链接：https://blog.csdn.net/qq_52125118/article/details/130085867

版权

最近遇到了个奇怪的需求，需要代码手动给数字输入框手动触发失焦事件；但是在看了 el-input-number 焦点事件部分的源码后，发现 el-input-number 只有获取焦点focus事件，却没有失去焦点的事件：

后来再阅读了 el-input-number的 template部分的源码后；发现el-input-number封装的el-input部分是由input绑定的ref属性：

最后的解决方案是由$ref获取到的 el-input-number 实例获取input组件实例去执行失去焦点blur事件，代码如下：

this.$refs.elInputNumber.$refs.input.blur()

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

我不后悔选了劫

关注关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
el-input-number 失去焦点blur事件，

最近遇到了个奇怪的需求，需要代码手动给数字输入框手动触发失焦事件；后来再阅读了 el-input-number的 template部分的源码后；
复制链接

扫一扫

el-input 失去焦点事件

seimeii的博客

07-15

3810

el-input 失去焦点事件

vueelementui动态表单

08-12

<el-input v-model.number="form.age"></el-input> </el-form-item> <el-form-item label="邮箱" prop="email"> <el-input v-model="form.email" type="email"></el-input> </el-form-item> </el-form> ``` ...

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

elementUI input-number组件在blur处理完数据后，视图没改变问题修复

qq_40122602的博客

06-05

202

推测，这个现象是由于输入框默认为1，然后处理完变量还是1，就没进行dom渲染参考了https://blog.csdn.net/qq_53492819/article/details/133200755。问题：页面打开后，在输入框输入1.xx的小数，blur处理完绑定的变量被处理成1，但是输入框显示的还是1.xx。尝试在页面打开后，在输入框输入2.xx的小数，blur处理完变量变2输入框正常展示2。背景：使用按钮组展示变量按钮，并在按钮组后面加了输入框，允许输入更大的数。

el-input输入框添加失去焦点事件

热门推荐

weixin_45861283的博客

10-20

3万+

** VUE 表单input 框使用@blur事件 input 框失去焦点 ,便会触发定义的方法 <el-form-item label="身份证号码：" prop="idNumber"> <el-input @blur="onBsp($event)" v-model="laApplicationDetail.idNumber" placeholder="身份证号码" maxlength="18" show-word-limit

vue -elementUI 输入框el-input 聚焦/失焦

DcTbnk的博客

04-23

7665

html 聚焦加v-focus，失焦加@blur <el-input v-model="scope.row.bcsl" v-focus size="small" auto-complete="off" @change="textChange(scope.$index, scope.row)" @blur="inputBlur" /> js 聚焦需----注册focus <script> ... export default { directives: { // 注册一个

el-input的@blur,el-select的@change方法如何传参

和曲而歌

06-12

917

提示：el-input的@blur,el-select的@change方法如何传参。

Web前端篇——el-input失去焦点事件监听

u011391361的博客

01-10

1436

el-input失去焦点事件监听

【javascript】vue和elementui中的键盘事件，el-input-number输入框限制输入数据规则，只能输入正整数，禁止输入除正整数以外的其他字符

DecorateCC的博客

06-06

8043

keyup.native=“UpNumber” @keydown.native="UpNumber"这是一个Vue.js中的事件绑定语法，用于监听键盘按键事件。其中@keyup.native表示监听键盘松开事件，@keydown.native表示监听键盘按下事件，UpNumber是自定义的事件处理函数。首先要监听keyup（键盘按下）事件，因为elementUi上面的input组件监听事件是没有这个事件的，所以可能会报错，所以我们需要加个vue事件的修饰符 .native，代表原生事件的意思。

vue element table中自定义一些input的验证操作

10-15

`required`表示该字段是否必填，`message`定义了验证失败时的提示信息，`trigger`指定了触发验证的事件，如`blur`表示失去焦点时触发验证。然后，我们需要在`el-form-item`中使用`:prop`属性来指定需要验证的字段...

vue使用Element组件时v-for循环里的表单项验证方法

08-27

<el-input v-model="item.price" type="number" size="small" style="width:80px;"></el-input> </el-form-item> </el-col> <el-col :span="4"> <i class="el-icon-remove-outline" @click="deleteLadder(index...

vue+element实现表单校验功能

10-16

这里`txt`字段的规则表明它必须为非空，当失去焦点（`blur`事件触发）时进行验证。 4. **验证方法**: 在`methods`中，可以调用`$refs.MyOpinion.validate()`方法来执行表单验证。这个方法接受一个回调函数，参数`...

Vue ElementUI实现:限制输入框只能输入正整数的问题

11-19

这种方法是在输入框失去焦点(`blur`)时检查输入值，确保其符合正整数的格式。代码示例如下： ```html <el-input v-model="inputValue" @blur="handleBlur"></el-input> ``` 在`methods`中定义`handleBlur`函数： ...

elementUI中input-number组件的坑

qq_40122602的博客

04-12

730

目前问题是输入非一百整数时会按四舍五入来纠正到最近的数值。于是尝试增加blur事件处理，但是还是会四舍五入。需求是一个输入框带加减按钮，步长为100，且输入非一百整数时，向下取整。排查下来发现要把step-strictly去掉，再增加blur。

el-input-number组件无法触发change事件，实时校验失效的解决办法

qq_43637218的博客

06-09

4377

解决el-input-number无法实时校验

VUE Element UI中el-input-number组件无法实时触发change事件

dmr123456的博客

11-03

1万+

el-input-number组件添加必填校验，不使用组件自带增减符号进行填充，手动填充值无法及时清除校验提示，组件失去焦点时才会消失。希望在输入值之后即时清除校验提示。解决方案 <el-input-number v-model="form.eventDisposalRange" :min="1" label="描述文字" :disabled="edit" @input.native="eventDisposalRangeChange()

el-input-number无法实时监听输入事件？我的解决办法

Dawnchen1的博客

03-22

6337

el-input-number无法实时监听输入事件？我的解决办法一般来说el-input-number的@change方法只会在blur的时候触发，那如何实时监听输入数字的变化呢? 步骤一：将@change替换成@input.native <el-input-number :ref="'ref' + $index" v-model="row.energy" @input.native="handleInput(row, $index)" :precision="3"

关于el-input-number计数器change事件校验数据，改变绑定数据值后change方法失效问题的原因及解决方法

direction_0528的博客

03-28

2923

查阅资料后发现问题原因在 change事件发生后触发了dom更新，而数据更改变化是在dom更新之后，这就导致了dom当中挂载的数据值还是更新之前的值，并且此后无刷新控制dom重新渲染的指令，使得chhange方法失效。解决方法：用$nextTick函数对绑定值进行更改（ this.$nextTick(() => { this.绑定值= 更改值 }) ），即在dom初次完成渲染挂载后，修改其值再次触发dom渲染挂载。

el-input-number失去焦点

04-01

您可以使用v-on:blur指令来捕捉el-input-number的失去焦点事件，并在相应的方法中执行所需的操作。以下是一个示例： ``` <el-input-number v-model="quantity" v-on:blur="onBlur"></el-input-number> ... methods: { onBlur: function() { console.log('el-input-number失去焦点'); //执行其他操作 } } ``` 在这个示例中，当el-input-number失去焦点时，将触发onBlur方法，并在控制台上输出一条消息。您可以在这个方法中执行其他操作，例如提交表单或更新数据。