vue input框失去焦点

时间:2022-09-28 铁柱同学人气:0

一、背景

博主之前在用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不熟练造成的，姑且记录一下吧。

加载全部内容