Question

我正在寻找一种解决方案，当用户单击Angular中的按钮时，它可以粘贴剪贴板中的内容。

当用户键入Ctrl + V时，我曾使用此代码粘贴数据，但是当用户单击按钮时，我将无法触发该事件。

 constructor() {
document.addEventListener('paste', (e: ClipboardEvent) => {
  console.log(e.clipboardData.getData('Text'));
  e.preventDefault();
  e.stopPropagation();
});

}

 copyFromClipBoard(event) {
    // My Code goes here
  }

Answer 1

您可以使用Clipboard API来访问系统剪贴板。 readText()方法返回一个承诺，该承诺可以解析为系统剪贴板上复制的文本：

模板：

<button (click)="handleClick()">Click Me</button>

组件：

handleClick() {
  // using bracket notation as TypeScript may complain about `clipboard` property
  navigator['clipboard'].readText().then(clipText => {
    // do something with copied text here
  });
}

这里是example的动作。

希望有帮助！

Answer 2

最简单的方法是使用Angular中的Renderer2和ElementRef。

您只需在组件/指令中插入Renderer2并听粘贴事件并做您的事情：

constructor(element: ElementRef, renderer: Renderer2) {}

和内部组件类监听复制/粘贴事件：

 renderer.listen(element.nativeElement, 'copy', (event) => {
      // do your stuff
    });

    renderer.listen(element.nativeElement, 'paste', (event) => {
      // Do your thing here
    });

Answer 3

copyFromClipBoard() {   
    /// For IE
    if (window['clipboardData']) {
      let value = window['clipboardData'].getData('Text');
      console.log(value);
    }
    else {
      // for other navigators
      navigator['clipboard'].readText().then(clipText => {        
        console.log(clipText);
      });
    }
  }

在Angular中捕获粘贴事件

3 个答案: