================================================================================================================================================================

Svelte: Warn user when caps lock is active

html5 svelte typescript webdev

Useful when webpage contains password inputs

<script lang="ts">
    let warnCapsLockOn: boolean = false

    function checkCapsLock(e: KeyboardEvent) {
        warnCapsLockOn = !!e.getModifierState("CapsLock")
    }
</script>

<svelte:body on:keyup={checkCapsLock}/>
    
{#if warnCapsLockOn}
    <div class="text-danger">Attention, caps lock on!</div>
{/if}