Question

Angular4文档显示（Key event filtering (with key.enter)）如何更轻松地捕捉键盘击键事件 - . Should be SELECT * FROM post WHERE kategori="Batch" ORDER BY或(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; } }已经在Angular中内置了。对于前者对于字母，例如 - pseudo-events和数字，例如 - (keyup.letters)="foo()"。有吗？以上解决方案是否适合按组过滤键盘按键？

docs

我感谢任何帮助。

Answer 1

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

这是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();
        }
      }
  }
}

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

1 个答案: