CODEWITHSUNDEEP
javascriptfirefoxsveltesvelte-3kaios
Filled Stacks
Filled Stacks

Reputation: 4356

Backspace doesn't work in number input field KaiOS | Svelte3

I've run into this weird problem while developing an app for KaiOS using Svelte3. When the input field is set to type number the backspace doesn't work. At all.

<input
 bind:this={ref}
 bind:value
 type="number" />

When it's set to "text" it works perfectly fine. Backspace removes characters as it's pressed. Backspace in this case is the "Call End" button on KaiOS devices. I don't know if this is a KaiOS problem or a Svelte3 problem.

I'm not very skilled in WebDev technologies, so I don't know what else to try. Some additional info that might point towards something.

I have one listener globally

 window.addEventListener("keydown", onKeyDown, true);

Which is attached in my KeyListener that I use to control my app navigation through selectable elements. This also doesn't fire when the backspace is pressed while an input field has focus. Things I have tried.

On KaiOS only onkeydown fires, incase that might give any of web dev JS experts a hint. I don't know what else to do. Any suggestions would be appreciated.

Upvotes: 2

Views: 792

Answers (2)

Filled Stacks
Filled Stacks

Reputation: 4356

We have no idea why this works but setting the input type to "tel" makes the backspace key fire and the input field to act as normal while still allowing numbers only.

Upvotes: 2

joshnuss
joshnuss

Reputation: 2047

To handle events on window you can use <svelte:window>. For example:

<svelte:window on:keypress={handleKeypress}/>

But if all you want to do is monitor keypresses on an input you can do it on the <input> directly with <input on:keypress={...}/>.

Here's an example of handling keypress on an input: https://svelte.dev/repl/bfd93b0799c142979eefa1f2558bfb96?version=3.20.1

Upvotes: 0

Related Questions