在 Angular 9 中开发的自定义指令不适用于手机

问题描述

我在 angular 9 中开发了一个自定义指令，用于输入仅数字和 1 个小数。该指令在桌面上完美运行，但在移动设备中却没有（好像该指令甚至不存在于输入字段中）。我使用 keydown 事件作为主机。这是 Angular 方面的问题吗？我需要参考的任何建议或现有帖子。

编辑

@Directive({ 
    selector: 'input[allowCurr]',host: { '(keydown)': 'allowND($event)' } 
})
export class AllowCurrDirective { 
    @input() allowCurr: string;
     /* Rest of my Logic here */ 
} 

我添加了这么多，因为我已经在我的 allowND 函数中放置了 alert，它正在里面，但是我用来捕获用户键输入的 event.key 未定义。

解决方法

你可以试试 HostListener

import { Directive,HostListener,Input } from "@angular/core";

@Directive({
  selector: "input[allowCurr]"
})
export class AllowCurrDirective {
  @HostListener("keydown",["$event"])
  allowND(e) {
    console.log(e.key);
  }
  @Input() allowCurr: string;
  /* Rest of my Logic here */
}

,

最后我能够解决这个问题。我不得不使用 event.target.value 和 input event 来满足我的要求，即只允许在输入框中输入数字和一位小数。

:: 研究 ::

在您的智能手机浏览器中打开此 MDN URL。您可以看到在输入事件中，KeyboardEvent.data 在桌面上用作 KeyboardEvent.key。这意味着您可以看到您在智能手机键盘上按下的键。 （我也在 W3schools try-it 编辑器中确认了这一点，在我的智能手机中）。但问题是 KeyboardEvent.data 与 iPhone 不兼容。这意味着，我既不能使用 event.key 也不能使用 event.data。输入事件是不可取消的（这意味着 event.preventDefault() 也不会工作）所以无论你输入什么，如果它没有通过条件，输入值应该是：

let targetVal = event.target.value;
event.target.value = targetVal.substring(0,targetVal.length -1);