Vue中如何监听input框的获取焦点和失去焦点事件？

本文共计941个文字，预计阅读时间需要4分钟。

目录

一、背景

二、首先是正宗的监听事件写法

1.HTML代码

2.JS部分

三、为什么上一次监听焦点事件失败了呢？

1.不好的原因

2.新增指令的方法

一、背景

二、正宗的监听事件写法

1. HTML代码 2. JS部分 三、为何上次监听焦点事件失败？ 1. 原因分析 2. 新增指令方法 一、背景 二、正宗监听事件写法 1. HTML代码 2. JS部分 三、为何焦点事件监听失败？ 1. 原因 2. 新增指令方法

目录

• 一、背景
• 二、首先是正宗的监听事件的写法
• 1、html代码
• 2、JS部分
• 三、为什么上次监听焦点事件失败呢
• 1、不好用的原因
• 2、新增指令的方法

一、背景

博主之前在用vue的获取焦点，失去焦点的时候，出现了@blur和@focus无效的情况。当时百思不得其解。今天又在写vue页面的时候，突然@blur和@focus又好用了。emmmm，看来这部分值得一战。

二、首先是正宗的监听事件的写法

1、html代码

//这是html的输入框。定义了一个获取焦点，失去焦点的方法 <input placeholder="请输入企业名称" @blur="animateWidth('company_name','blur')" @focus="animateWidth('company_name','focus')" >

2、JS部分

// 失去焦点和得到焦点的验证方法，name为要验证的字段名,type为blur或focus animateWidth(name, type) { if (name == "company_name") { if (type == "blur") { this.companyName.animate = false; } else { this.companyName.animate = true; return; } if (this.companyName.companyName.trim().length == 0) { this.companyName.valid = false; this.companyName.message = "请输入企业名称"; return false; }else{ this.companyName.valid = true; return true; } } },

这个方法算是通用的方法，大家在html里面根据自己的需求传不同的值即可。

三、为什么上次监听焦点事件失败呢

1、不好用的原因

博主又去看最初自己用@blur和@focus失败的代码，发现：

<i-input class="wallet-password-1" size="large" v-model="counts" refs = "counts" placeholder="0" type="number"> </i-input>

上次用的html部分是借用i-view框架的，也就是说，我们在使用vue的一些方法的时候，可能会和ui框架定义的方法冲突，这部分参考资料

了解原因之后，我们就知道了，使用vue自带的@blur和@focus是没问题的，如果在你的代码中不起作用，那只能证明一件事，那就是你的UI框架自己定义的有获取焦点失去焦点的方法。建议大家使用UI框架之前，先去官方文档看看，这样会好很多。

2、新增指令的方法

之前百度的时候，看到很多人都说可以通过新增指令来自定义获取焦点失去焦点的方法，具体的可以参考文末内容补充介绍。

补充介绍：vue框架中的表单输入框不支持focus以及blur事件的解决方案

采用指令的方式来解决这个问题(此处的前端框架以mint-ui为例):

1.html引用: v-mtfocus

2.在实例中添加指令

directives: { 'mtfocus' (el, binding, vnode) { let mtinput = el.querySelector('input') mtinput.onfocus = function () { ...//如果要对节点的数据进行更改,且更改要映射到页面上,则更改可在vnode.context上进行,这样,改完之后,改变就会映射到页面 } mtinput.onblur = function () { ...//同上理 } } }

出现这个问题，说到底还是自己对vue不熟练造成的，姑且记录一下吧。

到此这篇关于vue中监听input框获取焦点，失去焦点的问题的文章就介绍到这了,更多相关vue input框失去焦点内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！