Question

我在Angular 7应用程序中有一个textarea，我需要在单击按钮时将其内容复制到剪贴板。我在按钮的点击处理程序上使用以下代码：

if (this.txtConfigFile) {
    // Select textarea text
    this.txtConfigFile.nativeElement.select();

    // Copy to the clipboard
    document.execCommand("copy");

    // The following lines (in theory) unselect the text (DON'T WORK)
    this.txtConfigFile.nativeElement.value = this.txtConfigFile.nativeElement.value;
    this.txtConfigFile.nativeElement.blur();
}

注意：txtConfigFile是对textarea元素的引用，我在组件的声明中使用了@ViewChild：

@ViewChild('txtConfigFile') txtConfigFile: ElementRef;

这可以正常工作，但仍选择文本区域文本，我想避免这种情况。将文本复制到剪贴板后，如何取消选择？

谢谢。

Answer 1

解决方案1 ：复制任意文本

HTML

<button (click)="copyMessage('This goes to Clipboard')" value="click to copy" >Copy this</button>

.ts文件

copyMessage(val: string){
    let 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);
  }

解决方案2 ：从文本框复制

HTML

<input type="text" value="User input Text to copy" #userinput>
      <button (click)="copyInputMessage(userinput)" value="click to copy" >Copy from Textbox</button>

.ts文件

    /* To copy Text from Textbox */
  copyInputMessage(inputElement){
    inputElement.select();
    document.execCommand('copy');
    inputElement.setSelectionRange(0, 0);
  }

Demo Here

解决方案3：导入第三方指令ngx-clipboard

<button class="btn btn-default" type="button" ngxClipboard [cbContent]="Text to be copied">copy</button>

Answer 2

相反，在选择要取消选择的文本后添加this.txtConfigFile.nativeElement.setSelectionRange(0, 0);：

 if (this.txtConfigFile) {
  // Select textarea text
  this.txtConfigFile.nativeElement.select();

  // Copy to the clipboard
  document.execCommand("copy");

  // Deselect selected textarea
  this.txtConfigFile.nativeElement.setSelectionRange(0, 0);

}

DEMO

如何在Angular应用程序中将textarea内容复制到剪贴板

2 个答案: