I want to add spaces in a card ID input field automatically as the user is typing it. Here is my setup:
<input placeholder="e.g. 5200 1234 5678 9012 3456" bind:value={inputAC} on:keydown={inputACKeydown}>
let inputAC = "" function inputACKeydown(e: KeyboardEvent) { // Add spaces to the input if (e.key !== "Backspace" && e.key !== "Delete" && inputAC.length % 5 === 4) { inputAC += " " } }
However, the on:keydown event seems to be called before reactivity happens, which means that the inputAC value when the event calls are still the old value, not the new value. So spaces will only be added when the user enters the 5th character, not when the user finishes entering the 4th character.