html - 在下拉列表中捕获粘贴事件

Question

我试图捕捉输入字段上发生的粘贴事件。它适用于 textarea 和 input 但不适用于下拉菜单。选择。这是我的指令，console.log 永远不会被调用。

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

@Directive({ selector: '[catchPasteEvents]' })
export class CatchPastEvent {
  @HostListener('onpaste') onPaste(event) {
    console.log('Paste', event);
  }
}

标签： htmlangular

Answer 1

I created this directive that set a listener on document paste (as suggested by Sergey) but only when the select element is focused.

@Directive({ selector: 'select[selectPaste]' })
export class SelectPasteDirective implements OnDestroy {
  @Output()
  public paste: EventEmitter<ClipboardEvent> = new EventEmitter();

  private listener: (event: ClipboardEvent) => void = this.handlePaste.bind(
    this,
  );

  public ngOnDestroy(): void {
    document.removeEventListener('paste', this.listener);
  }

  @HostListener('focus')
  public onFocusedItem() {
    document.addEventListener('paste', this.listener);
  }

  @HostListener('blur')
  public onBlurItem() {
    document.removeEventListener('paste', this.listener);
  }

  private handlePaste(event: ClipboardEvent) {
    this.paste.emit(event);
  }
}