vue中监听input框获取焦点及失去焦点的问题

2022-07-27 10:17:38 作者：铁柱同学

这篇文章主要介绍了vue中监听input框获取焦点，失去焦点的问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

博主之前在用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框失去焦点内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
Vue中的@blur/@focus事件解读
Vue中的@blur事件 当元素失去焦点时所触发的事件问题
Vue中失去焦点时所触发的事件问题
通过html文件来使用Vue的单文件组件形式详解
2023-05-05
Vue3中createWebHistory和createWebHashHistory的区别详析
2023-06-06
基于Vue实现可选择不连续的时间范围的日期选择器
2023-06-06
vuex中的四个map方法的使用小结
2023-05-05
VUE中如何动态绑定类名和样式
2023-05-05
vue中如何动态添加样式
2023-05-05
Vue利用Mixin轻松实现代码复用
2023-05-05
Vue引入vuetify框架你需要知道的几点知识
2023-05-05
美国设下计谋,用娘炮文化重塑日本,已影响至中国
2021-11-19
时空伴随者是什么意思?时空伴随者介绍
2021-11-09
工信部称网盘企业免费用户最低速率应满足基本下载需求，天翼云盘回应：坚决支持，始终
2021-11-05
2022年放假安排出炉：五一连休5天 2022年所有节日一览表
2021-10-26
电脑版 - 返回首页
2006-2023 脚本之家 JB51.Net , All Rights Reserved.
苏ICP备14036222号