如何区分使用JavaScript添加的文档级别监听器和本地 Ctrl+C 和 Ctrl+V键？

Question

我有一个剪贴板服务，其中有一个 copy() 和 paste() 方法，每当我执行 Ctrl+C 和 Ctrl+V 时就会被调用。这些方法是在组件中使用 HostListeners 添加的文档级键盘监听器。现在，每当用户复制一些文本并执行 Ctrl+V 时，我的 paste() 方法就会被触发，这不应该发生。我该如何防止这种情况发生？有人能指点我吗？

我的剪贴板服务：

export class ClipService {
    private srcFolder;
    private srcItem;

    constructor() {
    }

    copy(srcFolder, srcItem) {
        this.srcFolder = srcFolder;
        this.srcItem = srcItem;
    }

    paste(destFolder) {

    }

}

我的组件：

@Component({
 selector: 'new-comp',
 templateUrl: 'new-comp.html'
})
export class NewComp {

constructor(private clipboard: ClipService){

}

private keydown(event: KeyboardEvent) {
        if (event.defaultPrevented) return;
        let folder = this.folder.json;
        let item = folder.activeItem;
        if (event.ctrlKey && event.keyCode === 67) {
            this.clipboard.copy(folder, item);
        } else if (event.ctrlKey && event.keyCode === 86) {
             this.clipboard.paste(this.finder.activeFolder);
        }
    }
}

谢谢。

- Donut

---

使用以下链接 https://codepen.io/jackocnr/pen/ezBKVQ 可以帮助您实现所需的功能。 - Sivakumar Tadisetti

如果以上链接仍无法帮助，请尝试发布你目前已经实现的代码。 - Sivakumar Tadisetti

@JavascriptLover-SKT 我已经放置了事件监听器，并且函数可以通过键盘键触发。当浏览器执行本地复制粘贴操作时，我想区分或拦截我的函数。 - Donut

@Bergi 有什么建议吗？ :) - Donut

Donut，你试过Chellappan的答案了吗？ - Sivakumar Tadisetti

@JavascriptLover-SKT 那不起作用。 - Donut

Answer 1

不要使用键盘事件处理复制和粘贴。只需使用剪贴板事件来处理它们，如下所示：

@HostListener('document:copy', ['$event'])
copy(evt: ClipboardEvent) {
 let folder = this.folder.json;
 let item = folder.activeItem;
 this.clipboard.copy(folder, item);
}

@HostListener('document:paste', ['$event'])
paste(evt: ClipboardEvent) {
 this.clipboard.paste(this.finder.activeFolder);
}

注意：IE11不支持剪贴板复制事件。

希望这能帮到您。

- ShellZero

Answer 2

在组件级别触发事件，而不是使用文档级别事件

每当您在组件中执行复制粘贴操作时，触发复制粘贴方法

示例

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  host: {
    '(click)': 'onClick($event)',
  }
})
export class AppComponent  {
  name = 'Angular';
  onClick(e){
    console.log(1);
  }
}

- Chellappan வ