Проверить, имеет ли элемент фокус — директива VueJS

Я пытаюсь проверить, имеет ли элемент фокус в моем случае. Ввод и добавление класса к другому элементу. Это то, что я пытаюсь, но не уверен, почему hasFocus() не работает.

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

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

Попытка сделать это в пользовательской директиве Vuejs


javascript vue.js vue-directives
person Teni    schedule 15.01.2020    source источник
comment
Будет ли это работать, если вы вручную выполните эти операторы в консоли разработчика?   -  person David Weldon    schedule 15.01.2020
comment
@DavidWeldon, только если я вызываю document.hasFocus(). Так что, вероятно, работает только для документа, а не для одного элемента. Итак, я пытаюсь найти другую альтернативу, если это возможно   -  person Teni    schedule 15.01.2020
comment
В соответствии с этим вам следует искать document.activeElement.   -  person David Weldon    schedule 15.01.2020

Ответы (2)


arrow_upward
1
arrow_downward

На форуме Vue есть предложение для использования события 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.
  }
}
person makkus    schedule 15.01.2020

arrow_upward
-2
arrow_downward

Поскольку я упомянул, что мне нужно сделать это как пользовательскую директиву.

Вот как я это исправил

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)
  }
}
person Teni    schedule 16.01.2020