Angular 6 - 移动设备上的按键空间答案

【问题标题】：Angular 6 - Keydown Space on MobileAngular 6 - 移动设备上的按键空间
【发布时间】：2018-09-17 15:43:32
【问题描述】：

我有一个input，我在其中监听keydown.space 事件。此技术在桌面上运行良好，但在移动设备上不会触发该事件。我的 HTML 模板如下所示：

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

所以我需要一种方法来监听手机软键盘上的space key事件。

【问题讨论】：

【解决方案1】：

您在什么“移动设备”上进行了测试？如果是 Android，就像 William Moore 说的那样，可能是 Android 没有将空格键按键注册为标准 32 的问题。

否则，您可以尝试 onkeypress + 监听 JS 端的 keycode，如下所示：

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

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

【讨论】：

【解决方案2】：

我就是这么做的：

HTML

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

打字稿

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

【讨论】：