useActiveElement ​
Reactive document.activeElement
Demo ​
Usage ​
js
import { useActiveElement } from '@vueuse/core'
const activeElement = useActiveElement()
watch(activeElement, (el) => {
console.log('focus changed to', el)
})
Component Usage ​
This function also provides a renderless component version via the
@vueuse/components
package. Learn more about the usage.
vue
<template>
<UseActiveElement v-slot="{ element }">
Active element is {{ element.dataset.id }}
</UseActiveElement>
</template>
Type Declarations ​
typescript
export interface UseActiveElementOptions
extends ConfigurableWindow,
ConfigurableDocumentOrShadowRoot {
/**
* Search active element deeply inside shadow dom
*
* @default true
*/
deep?: boolean
/**
* Track active element when it's removed from the DOM
* Using a MutationObserver under the hood
* @default false
*/
triggerOnRemoval?: boolean
}
/**
* Reactive `document.activeElement`
*
* @see https://vueuse.org/useActiveElement
* @param options
*/
export declare function useActiveElement<T extends HTMLElement>(
options?: UseActiveElementOptions,
): Ref<T | null | undefined, T | null | undefined>
Source ​
Contributors ​
Anthony Fu
Dominik Pschenitschni
Anthony Fu
Alex
Jake Tigchelaar
duoduoObama
vaakian X
James Garbutt
vaakian X
wheat
Alex Kozack