vue Input失去光标事件 blur、focus获得焦点

原生输入框

如果没有使用框架(有些框架自带@blur事件的处理,例如:element-ui),就可以是使用以下的方法来实现失去焦点事件

<input v-model="registerDate.userName" @blur.native.capture="checkUserName"></input>

只要使用@blur.native.capture即可。

  methods: {
    checkUserName(){
    // 检测是否已经被注册
    },
  }

Elemant-ui中的实现

在Element-ui中,包含下面的方法

Input Methods

方法名 说明 参数
focus 使 input 获取焦点
blur 使 input 失去焦点
select 选中 input 中的文字

我们只需要

 <el-input type="email" @blur="checkEmail" v-model="registerDate.email"></el-input>

此时就不需要加后面的capture

    checkEmail(){
      // 检测是否已经被注册和格式问题
      if (this.registerDate.email.match(api.EMAIL_REGX) === null){
        Notice.openNotice("邮箱格式不正确");
        return;
      }
      api.checkEmail(this.registerDate.email).then(res =>{
        if (res.code === api.SUCCESS_CODE){
          Notice.openNotice(res.message)
        }
      })
    },

获得焦点

this.$nextTick(()=>{
    this.$refs.input_description.focus();
})
版权声明:
作者:北忘山
文章:vue Input失去光标事件 blur、focus获得焦点
链接:https://www.beiwangshan.com/archives/277.html
来源:beiwangshan.com
文章版权归作者所有,未经允许请勿转载。
THE END
分享
二维码
打赏
< <上一篇
下一篇>>