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

Question

我在 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，我曾经用来捕获用户键输入，未定义。

Answer 1

你可以试试 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 */
}

Answer 2

我终于解决了这个问题。我必须使用 event.target.value 和输入事件来满足我的要求，即只允许在输入框中输入数字和一位小数。

:: 研究 ::

在您的智能手机浏览器中打开此 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);

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

Custom Directive developed in Angular 9 not working in mobiles

javascript

mobile-browser

typescript

angular

angular9