Active Element

Reactive document.activeElement.

Usage

<script>
    import { activeEl } from '@sveu/browser'

    const el = activeEl()
</script>
<script>
    import { activeEl } from '@sveu/browser'

    const el = activeEl()
</script>
svelte

Example

Select the inputs below to see the changes

Current Active Element: null
<script lang="ts">
    import { activeEl } from "@sveu/browser"

    const el = activeEl()

    $: key = $el?.dataset?.id || "null"
</script>

<note> Select the inputs below to see the changes </note>
<br />
<br />
<div>
    {#each [1, 2, 3, 4, 5, 6] as i}
        <input
            type="text"
            data-id="{i}"
            placeholder="{String(i)}" />
    {/each}
</div>

<div class="font-black">
    Current Active Element:
    <span >{key}</span>
</div>
<script lang="ts">
    import { activeEl } from "@sveu/browser"

    const el = activeEl()

    $: key = $el?.dataset?.id || "null"
</script>

<note> Select the inputs below to see the changes </note>
<br />
<br />
<div>
    {#each [1, 2, 3, 4, 5, 6] as i}
        <input
            type="text"
            data-id="{i}"
            placeholder="{String(i)}" />
    {/each}
</div>

<div class="font-black">
    Current Active Element:
    <span >{key}</span>
</div>
svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Click fold/expand code
Last update at: Invalid Date