[英]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.