快捷導(dǎo)航

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

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

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

一、背景

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

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

1、html代碼

//這是html的輸入框。定義了一個獲取焦點，失去焦點的方法
 <input placeholder="請輸入企業(yè)名稱" @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 = "請輸入企業(yè)名稱";
            return false;
        }else{
             this.companyName.valid = true;
            return true;
        }  
      } 
    },

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

三、為什么上次監(jiā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框架的，也就是說，我們在使用vue的一些方法的時候，可能會和ui框架定義的方法沖突，這部分參考資料

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

2、新增指令的方法

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

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

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

1.html引用: v-mtfocus

2.在實例中添加指令

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

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

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

您可能感興趣的文章: