angulardirectivekeyboard-eventsonkeydown

Detect Ctrl + C and Ctrl + V in an input from browsers


I am using the direct following and I do not detect the copy and paste with the keys inside the input, would someone know how? Thank you!

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;
        }
    }
}

Solution

  • You simply can do who : for information this code manage all mac user who user CMD instead of ctrl

    @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');
    }
    

    If you want to detect other kind of shortcut :

    Online sample

    --- UPDATE AFTER COMMENT ---

    You may can do something like this

      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))
                );
        }
    

    or if is not working, just :

    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))
        );
    }
    

    Where this.deviceService.getKeybordEvent(); is method who return type of event base on User Agent. massive list of user agent can be find here