簡體   English   中英

檢查元素是否具有焦點 - Vue.js 指令

[英]Check if an element has focus - Vue.js directive

我試圖檢查一個元素是否有焦點,在我的例子中是 Input,然后將一個類添加到另一個元素。 這就是我正在嘗試的,但我不確定為什么 hasFocus() 不起作用。

onFocus () {
    let isFocused = document.el.querySelector('a-input')
    let focusedEl = document.el.querySelector('a-button')

    if(isFocused.hasFocus()) {
      focusedEl.classList.add('testClass')
    }
  }

我正在嘗試在 Vue.js 自定義指令中執行此操作。

Vue.js 論壇里有一個建議使用focusin事件:

created() {
  document.addEventListener('focusin', this.focusChanged)
},
beforeDestroy() {
  document.removeEventListener('focusin', this.focusChanged)
},
methods: {
  focusChanged (event) {
    const el = event.target
    // do something with the element.
  }
}

由於我提到我需要將其作為自定義指令:

這就是我修復它的方式。

class someClassName {
  constructor (el, config = {}) {
    this.el = el
    this.input = el.querySelector('.a-input')
    this.button = el.querySelector('.a-button')

    this.onInputFocus = this.onInputFocus.bind(this)

    this.attachEvents()
  }

  onInputFocus () {
    this.button.classList.add('testclass')
  }

  attachEvents () {
    this.input.addEventListener('focus', this.onInputFocus)
  }
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM