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

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

1 个答案: