useActiveElement
Reactive document.activeElement
Demo
Usage
import { useActiveElement } from '@vueuse/core'
const activeElement = useActiveElement()
watch(activeElement, (el) => {
console.log('focus changed to', el)
})
import { useActiveElement } from '@vueuse/core'
const activeElement = useActiveElement()
watch(activeElement, (el) => {
console.log('focus changed to', el)
})
Component
This function also provides a renderless component version via the@vueuse/components package. Learn more about the usage. <UseActiveElement v-slot="{ element }">
Active element is {{ element.dataset.id }}
</UseActiveElement>
<UseActiveElement v-slot="{ element }">
Active element is {{ element.dataset.id }}
</UseActiveElement>
Type Declarations
/**
* Reactive `document.activeElement`
*
* @see https://vueuse.org/useActiveElement
* @param options
*/
export declare function useActiveElement<T extends HTMLElement>(
options?: ConfigurableWindow
): ComputedRef<T | null | undefined>
/**
* Reactive `document.activeElement`
*
* @see https://vueuse.org/useActiveElement
* @param options
*/
export declare function useActiveElement<T extends HTMLElement>(
options?: ConfigurableWindow
): ComputedRef<T | null | undefined>
Source
Contributors
Anthony Fu
wheat
Alex Kozack