关键事件的数字，字母或其他组过滤

Question

Angular4文档显示（Key event filtering (with key.enter)）如何捕捉键盘击键事件更容易 - (keyup.enter)="foo()"或keyup.w或keyup.space等

我需要的是火灾事件仅在被按下字母。我能想到的

一种方法是：

<input id="textFilter" (keyup)=“foo($event)”>

foo(e){ 
    var allowedKeys = [‘KeyQ’, ‘KeyW’, ‘KeyE’, and the rest of the alphabet...] 
    if (allowedKeys.indexOf(e.code) != -1) { 
     return true; 
    } 
    } 

但我希望这样的pseudo-events已经集结在角。例如。字母，如 - (keyup.letters)="foo()"和数字，如 - (keyup.numbers)="foo()"。有没有？上面的解决方案是用于过滤组键盘按键更好吗？

docs

我感谢所有帮助。

Answer 1

AFAIK没有由角度提供的密码组。但是您可以轻松创建自定义指令来允许/禁止您自己的一组密钥。

以下是仅允许字母的demo。

仅-letters.directive.ts：

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

@Directive({ 
    selector: '[onlyLetters]' 
}) 
export class OnlyLetters { 

    constructor(private el: ElementRef) { } 

    @Input() onlyLetters: boolean; 

    @HostListener('keydown', ['$event']) onKeyDown(event) { 
    let e = <KeyboardEvent> event; 
    if (this.onlyLetters) { 

     // console.log(e); 

     if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 || 
     // Allow: Ctrl+A 
     (e.keyCode == 65 && e.ctrlKey === true) || 
     // Allow: Ctrl+C 
     (e.keyCode == 67 && e.ctrlKey === true) || 
     // Allow: Ctrl+X 
     (e.keyCode == 88 && e.ctrlKey === true) || 
     // Allow: home, end, left, right 
     (e.keyCode >= 35 && e.keyCode <= 39)) { 
      // let it happen, don't do anything 
      return; 
     } 
     // Ensure that it is a number and stop the keypress 
     if (((e.keyCode < 65 || e.keyCode > 90)) && (e.keyCode < 96 || e.keyCode > 105)) { 
      e.preventDefault(); 
     } 
     } 
    } 
}