TypeScript 如何使用按钮从剪贴板粘贴数据？

Question

我可以使用如下所示的按钮将数据复制到剪贴板。但是如何使用相同的行为从剪贴板中获取数据呢？只有当我单击输入字段或文本区域时，粘贴事件才有效。我需要它能够使用按钮工作。

我尝试使用 window.clipboardData 但它无法识别它。有没有办法通过按下按钮触发粘贴事件？

 Copy(val) {
    const selBox = document.createElement('textarea');
     selBox.style.position = 'fixed';
     selBox.style.left = '0';
     selBox.style.top = '0';
     selBox.style.opacity = '0';
     selBox.value = val;

     document.body.appendChild(selBox);
     selBox.focus();
     selBox.select();

     document.execCommand('copy');
     document.body.removeChild(selBox);
     this.icon = 'checkmark';
     this.copyButtonText = 'Copied!';
     this.tooltip = true;
 }

我的html

   <button #copyButton [icon]='this.icon' (click)="Copy(this.text)">{{copyButtonText}}</button>    
   <textarea [disabled]="true"> {{this.text}} </textarea>

Answer 1

实现这一点的最佳方法是使用窗口选择处理程序。

let clipboardContent:string = "" //the clipboard content variable

window.addEventListener('copy', (e:ClipboardEvent) => {
  clipboardContent = window.getSelection().toString();
  //everytime someone copies some thing its text content 
  //is available within the clipboardContent variable
});

//now for the button press event you have the clipboard data
buttonElement.addEventListener('click', () => {
  //paste your content
  textareaElement.value = clipboardContent;
});