Фильтрация ключевых событий по числам, буквам или другим группам

В документах Angular4 показано ( фильтрация событий клавиш (с помощью 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()". Есть ли такие? И предпочтительнее ли указанное выше решение для фильтрации нажатий клавиш по группам?

документы

Я ценю любую помощь.


javascript angular keyboard-events eventfilter
person Julius    schedule 15.07.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

AFAIK нет групп клавиш, предоставляемых angular. Но вы можете легко создать пользовательскую директиву, чтобы разрешить/запретить свой собственный набор ключей.

Вот демонстрация разрешения только писем.

только буквы.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();
        }
      }
  }
}
person Nehal    schedule 15.07.2017