Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1815

Svelte change bind:value in keydown event

$
0
0

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.


Viewing all articles
Browse latest Browse all 1815

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>