【问题标题】:I'm getting an error when I use "key" instead of "keyCode" with "KeyboardEvent" in angular当我在角度中使用“key”而不是“keyCode”和“KeyboardEvent”时出现错误
【发布时间】:2019-10-11 06:47:59
【问题描述】:



我正在尝试为输入字段(文本框)创建一个自定义指令,以便它只接受数字而不接受字母字符。

我有以下 (only-numbers.directive.ts) 文件

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: "[onlyNumbers]"
})
export class OnlyNumbersDirective {
  constructor(private el: ElementRef) {}

  @HostListener('keydown', ['$event'])
  onKeyDown(e: KeyboardEvent) {
    if (
      // Allow: Delete, Backspace, Tab, Escape, Enter
      [46, 8, 9, 27, 13].indexOf(e.keyCode) !== -1 ||
      (e.keyCode === 65 && e.ctrlKey === true) || // Allow: Ctrl+A
      (e.keyCode === 67 && e.ctrlKey === true) || // Allow: Ctrl+C
      (e.keyCode === 86 && e.ctrlKey === true) || // Allow: Ctrl+V
      (e.keyCode === 88 && e.ctrlKey === true) || // Allow: Ctrl+X
      (e.keyCode === 65 && e.metaKey === true) || // Cmd+A (Mac)
      (e.keyCode === 67 && e.metaKey === true) || // Cmd+C (Mac)
      (e.keyCode === 86 && e.metaKey === true) || // Cmd+V (Mac)
      (e.keyCode === 88 && e.metaKey === true) || // Cmd+X (Mac)
      (e.keyCode >= 35 && e.keyCode <= 39) // Home, End, Left, Right
    ) {
      return; // let it happen, don't do anything
    }
    // Ensure that it is a number and stop the keypress
    if (
      (e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) &&
      (e.keyCode < 96 || e.keyCode > 105)
    ) {
      e.preventDefault();
    }
  }

}


上面的代码运行良好,但我知道“keyCode”已被弃用,所以我尝试改用“key”,但出现此错误:

Argument of type 'string' is not assignable to parameter of type 'number'. (screenshot)

This condition will always return 'false' since the types 'string' and '65' have no overlap. (screenshot)


所以我的问题是如何解决它?

提前致谢

【问题讨论】:

标签: angular angular-directive


【解决方案1】:

我使用了 Eliseo 指出的这个解决方案,效果很好 https://stackoverflow.com/a/54462816/6663458

感谢埃利塞奥

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-10-10
    • 1970-01-01
    • 1970-01-01
    • 2021-05-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多