Ich verwende die direkte Folge und erkenne das Kopieren und Einfügen mit den Tasten in der Eingabe nicht. Würde jemand wissen, wie? Vielen Dank!

export class OnlyNumberDirective {
    // Allow decimal numbers. The \, is only allowed once to occur
    private regex: RegExp = new RegExp(/[0-9]+(\,[0-9]{0,1}){0,1}$/g);

    // Allow key codes for special events. Reflect :
    // Backspace, tab, end, home
    private specialKeys: Array<string> = [ 'Backspace', 'Tab', 'End', 'Home', 'Delete', 'Del', 'Ctrl', 'ArrowLeft', 'ArrowRight', 'Left', 'Right' ];

    constructor(private el: ElementRef) {
    }

    @HostListener('keydown', [ '$event' ])
    onKeyDown(event: KeyboardEvent): string {
        // Allow Backspace, tab, end, and home keys
        if (this.specialKeys.indexOf(event.key) !== -1) {
            return null;
        }

        // Do not use event.keycode this is deprecated.
        // See: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
        let current: string = this.el.nativeElement.value;
        // We need this because the current value on the DOM element
        // is not yet updated with the value from this event
        let next: string = current.concat(event.key);
        if (next && !String(next).match(this.regex)) {
            event.preventDefault();
            return null;
        } else {
            return next;
        }
    }
}
16
Mario Ramos García 19 Apr. 2018 im 15:03

5 Antworten

Beste Antwort

Sie können einfach tun, wer: Zur Information verwaltet dieser Code alle Mac-Benutzer, die CMD anstelle von Strg verwenden

@HostListener('window:keydown',['$event'])
onKeyPress($event: KeyboardEvent) {
    if(($event.ctrlKey || $event.metaKey) && $event.keyCode == 67)
        console.log('CTRL + C');
    if(($event.ctrlKey || $event.metaKey) && $event.keyCode == 86)
        console.log('CTRL +  V');
}

Wenn Sie eine andere Art von Verknüpfung erkennen möchten:

  • event.ctrlKey
  • event.altKey
  • event.metaKey (Aka Cmd für Mac-Benutzer)

Online-Beispiel

--- UPDATE NACH KOMMENTAR ---

Sie können so etwas tun

  ngOnInit() {
        this.bindKeypressEvent().subscribe(($event: KeyboardEvent) => this.onKeyPress($event));
    }

    onKeyPress($event: KeyboardEvent) {
        if(($event.ctrlKey || $event.metaKey) && $event.keyCode == 67)
            console.log('CTRL + C');
        if(($event.ctrlKey || $event.metaKey) && $event.keyCode == 86)
            console.log('CTRL +  V');
    }

    private bindKeypressEvent(): Observable<KeyboardEvent> {
        const eventsType$ = [
            fromEvent(window, 'keypress'),
            fromEvent(window, 'keydown')
        ];
        // we merge all kind of event as one observable.
        return merge(...eventsType$)
            .pipe(
                // We prevent multiple next by wait 10ms before to next value.
                debounce(() => timer(10)),
                // We map answer to KeyboardEvent, typescript strong typing...
                map(state => (state as KeyboardEvent))
            );
    }

Oder wenn es nicht funktioniert, einfach:

private bindKeypress(): Observable<KeyboardEvent> {
    const typeOfEvent = this.deviceService.getKeybordEvent();
    fromEvent(window, typeOfEvent)
    .pipe(
        // We map answer to KeyboardEvent, typescript strong typing...
        map(state => (state as KeyboardEvent))
    );
}

Dabei ist this.deviceService.getKeybordEvent(); eine Methode, die den Ereignistyp auf User Agent zurückgibt. Eine umfangreiche Liste der Benutzeragenten finden Sie hier

11
Yanis-git 19 Apr. 2018 im 13:17

Angular bietet eine High-Level-API zum Abhören von Tastendruckkombinationen. Schauen Sie sich das folgende Beispiel an.

Strg-Tasten.Direktiv.ts

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

@Directive({
  selector: '[ctrlKeys]',
})
export class CtrlKeysDirective  {
  @Output() ctrlV = new EventEmitter();
  @Output() ctrlC = new EventEmitter();

  @HostListener('keydown.control.v') onCtrlV() {
    this.ctrlV.emit();
  }

  @HostListener('keydown.control.c') onCtrlC() {
    this.ctrlC.emit();
  }
}

Verwendung

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <input ctrlKeys (ctrlV)="onCtrlV()" (ctrlC)="onCtrlC()" >
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  onCtrlV() {
    console.log('ctrlV pressed')
  }

  onCtrlC() {
    console.log('ctrlC pressed')
  }
}

Live-Demo

9
Tomasz Kula 19 Apr. 2018 im 12:13

Anstatt die Schlüsselereignisse auf Befehle zum Kopieren und Einfügen zu überwachen, empfehle ich, die Zwischenablageereignisse (copy, cut, paste) zu behandeln. Es kümmert sich nicht nur um die verschiedenen Verknüpfungen, die auf verschiedenen Plattformen verwendet werden, sondern erkennt auch die mit dem Kontextmenü eingeleiteten Zwischenablagevorgänge. Bitte beachten Sie, dass das Ereignis paste mit e.preventDefault() abgebrochen werden kann. Sie können den Code bei der Arbeit unter this stackblitz sehen.

@HostListener('copy', ['$event'])
onCopy(e: ClipboardEvent) {
  ...
}

@HostListener('paste', ['$event'])
onPaste(e: ClipboardEvent) {
  let clipboardData = e.clipboardData || window.clipboardData;
  let pastedText = clipboardData.getData('text');
  ...
}
2
ConnorsFan 19 Apr. 2018 im 13:49

Fügen Sie dies einfach zu einer beliebigen Komponente hinzu. Wenn der Benutzer die Tastenkombination Strg + s ausführt, wird "Save Performed" gedruckt.

@HostListener('document:keydown.control.s', ['$event']) onKeydownHandler(event: KeyboardEvent) {
    console.log('Save Performed');
    event.preventDefault();
}

Wenn Sie Strg + v möchten, ersetzen Sie das Dokument 's' in ': keydown.control.s' durch 'v'.

2
Dilshan Liyanage 10 Mai 2019 im 04:56

Importieren Sie zunächst HostListener und erstellen Sie eine Methode zum Abhören des Keyup-Ereignisses. Verwenden Sie auch ctrlKey, da der Schlüsselcode veraltet ist.

import { HostListener} from '@angular/core';

    @HostListener('window:keyup', ['$event'])
       keyEvent(event: KeyboardEvent) {
          if (event.ctrlKey) {
              if (event.key === 'c') {
                 console.log('ctrl c');         
              }      
             else if (event.key === 'v') {
                 console.log('ctrl v')
              }
      }
1
nesdi 6 Apr. 2020 im 08:07