Angular 6 - Keydown Space on Mobile

Question

I have an input where I listen for the keydown.space event. This technique works fine on the desktop, but the event isn't triggered on mobile. My HTML template looks like the following:

<input
    type="text"
    (keydown.space)="onAdd()"
    (keydown.backspace)="onRemoveLast()"
>

So I need a way to listen to the space key event on the software keyboard of mobile phones.

Possible duplicate of [keyCode on android is always 229](https://stackoverflow.com/questions/36753548/keycode-on-android-is-always-229) — William Moore, Sep 17 '18 at 16:14

score 2 · Accepted Answer · answered Sep 17 '18 at 16:56

2

What "mobile" did you test it on? If it's Android, like William Moore said, it may be an issue of Android not registering spacebar keypress as the standard 32.

Otherwise, you can try onkeypress + listening for the keycode on the JS side like so:

<input
  type="text"
  onkeypress="onAdd(event)"
  (keydown.backspace)="onRemoveLast()"
>

function onAdd(event){
  if (event.keyCode === 32) ...
}

answered Sep 17 '18 at 16:56

Mark

139
7

thank you, it might actually be caused by the Android issue – Florian Ludewig Sep 17 '18 at 17:08

score 0 · Answer 2 · answered Sep 17 '18 at 17:44

0

That's what I did to make it work:

HTML

<input
    [(ngModel)]="input"
    (keydown.backspace)="onRemoveLast()"
    (ngModelChange)="onChange()"
>

Typescript

public onChange(): void {
    if (this.input.substr(-1) === ' ') this.add();
}

answered Sep 17 '18 at 17:44

Florian Ludewig

4,338
11
71
137

Angular 6 - Keydown Space on Mobile

2 Answers2