vue中監(jiān)聽input框獲取焦點(diǎn)及失去焦點(diǎn)的問題

更新時(shí)間：2022年07月27日 10:17:37 作者：鐵柱同學(xué)

這篇文章主要介紹了vue中監(jiān)聽input框獲取焦點(diǎn)，失去焦點(diǎn)的問題,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

一、背景

博主之前在用vue的獲取焦點(diǎn)，失去焦點(diǎn)的時(shí)候，出現(xiàn)了@blur和@focus無效的情況。當(dāng)時(shí)百思不得其解。今天又在寫vue頁面的時(shí)候，突然@blur和@focus又好用了。emmmm，看來這部分值得一戰(zhàn)。

二、首先是正宗的監(jiān)聽事件的寫法

1、html代碼

//這是html的輸入框。定義了一個(gè)獲取焦點(diǎn)，失去焦點(diǎn)的方法
 <input placeholder="請(qǐng)輸入企業(yè)名稱" @blur="animateWidth('company_name','blur')" @focus="animateWidth('company_name','focus')" >

2、JS部分

   // 失去焦點(diǎn)和得到焦點(diǎn)的驗(yàn)證方法，name為要驗(yàn)證的字段名,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 = "請(qǐng)輸入企業(yè)名稱";
            return false;
        }else{
             this.companyName.valid = true;
            return true;
        }  
      } 
    },

這個(gè)方法算是通用的方法，大家在html里面根據(jù)自己的需求傳不同的值即可。

三、為什么上次監(jiān)聽焦點(diǎn)事件失敗呢

1、不好用的原因

博主又去看最初自己用@blur和@focus失敗的代碼，發(fā)現(xiàn)：

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

上次用的html部分是借用i-view框架的，也就是說，我們?cè)谑褂胿ue的一些方法的時(shí)候，可能會(huì)和ui框架定義的方法沖突，這部分參考資料

了解原因之后，我們就知道了，使用vue自帶的@blur和@focus是沒問題的，如果在你的代碼中不起作用，那只能證明一件事，那就是你的UI框架自己定義的有獲取焦點(diǎn)失去焦點(diǎn)的方法。建議大家使用UI框架之前，先去官方文檔看看，這樣會(huì)好很多。

2、新增指令的方法

之前百度的時(shí)候，看到很多人都說可以通過新增指令來自定義獲取焦點(diǎn)失去焦點(diǎn)的方法，具體的可以參考文末內(nèi)容補(bǔ)充介紹。

補(bǔ)充介紹：vue框架中的表單輸入框不支持focus以及blur事件的解決方案

采用指令的方式來解決這個(gè)問題(此處的前端框架以mint-ui為例):

1.html引用: v-mtfocus

2.在實(shí)例中添加指令

directives: {
    'mtfocus' (el, binding, vnode) {
      let mtinput = el.querySelector('input')
      mtinput.onfocus = function () {
       ...//如果要對(duì)節(jié)點(diǎn)的數(shù)據(jù)進(jìn)行更改,且更改要映射到頁面上,則更改可在vnode.context上進(jìn)行,這樣,改完之后,改變就會(huì)映射到頁面
      }
      mtinput.onblur = function () {
        ...//同上理
      }
    }
  }

出現(xiàn)這個(gè)問題，說到底還是自己對(duì)vue不熟練造成的，姑且記錄一下吧。

到此這篇關(guān)于vue中監(jiān)聽input框獲取焦點(diǎn)，失去焦點(diǎn)的問題的文章就介紹到這了,更多相關(guān)vue input框失去焦點(diǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: