2

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.

  • Assign functions to onkeydown, onkeyup, onkeypressed (none of them fire the backspace call)
  • Removed the event listener that I mention above, changes nothing.
  • Assign the functions in a non-svelte way as pure JS inline functions.

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.

Filled Stacks
  • 4,116
  • 1
  • 23
  • 36
  • have you succeeded to run your svelte app in an actual device or the emulator? When I serve my app using a webserver it runs ok, but all I got in the emulator is a blank screen – Vector May 23 '20 at 02:57
  • @Vector yes. I've been running on device for a bit. If you're using svelte then you can't have any Slot elements anywhere in the app for any of your components. It doesn't run and there's no error. I don't know why it does that, I want to file an issue but I don't know if they'll go through all the KaiOS setup and get a device to run on the device. – Filled Stacks May 25 '20 at 14:30

2 Answers2

2

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.

Filled Stacks
  • 4,116
  • 1
  • 23
  • 36
0

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

joshnuss
  • 1,869
  • 14
  • 11
  • Hey @joshnuss I have done that as well. The backspace button still doesn't fire when it's set to type="number". We found out that setting the type to "tel" made it work as expected. Very weird bug but that's the workaround for now – Filled Stacks Mar 30 '20 at 07:46