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

Posted 2023-02-17

【中文标题】数字、字母或其他组的关键事件过滤

【英文标题】：Key event filtering for numbers, letters or other groups

【发布时间】：2017-07-15 08:28:36

【问题描述】：

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 已经内置在 Angular 中。例如。对于字母，如 -(keyup.letters)="foo()" 和对于数字，如 -(keyup.numbers)="foo()"。有吗？上述解决方案是否更适合按组过滤键盘击键？

docs

感谢您的帮助。

【参考方案1】：

AFAIK 没有 angular 提供的 keyup 组。但是您可以轻松创建自定义指令来允许/禁止您自己的一组键。

这是一个 demo 只允许字母。

only-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();