从Angular中的textarea复制到剪贴板

Question

我正在尝试从 HTML 文本区域复制文本，但是我只找到了一个带有输入标签的解决方案，如下所示：

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

功能：

copyInputMessage(inputElement){
  inputElement.select();
  document.execCommand('copy');
  inputElement.setSelectionRange(0, 0);
}

当我想用 textarea 标签替换输入标签时，它不再起作用了。 有没有类似的简单的文本区域解决方案？

Answer 1

试试这样：

Working Demo

<textarea type="text" #userinput></textarea>

Answer 2

<textarea cols="30" rows="4" [(ngModel)] = "userinput"></textarea>




<button (click)="copyInputMessage()" value="click to copy">Copy from Textbox</button>

在 Ts 文件中创建一个变量作为字符串并使用属性绑定将其与文本区域值绑定

 userinput: string;


copyInputMessage(this.userinput){
  inputElement.select();
  document.execCommand('copy');
  inputElement.setSelectionRange(0, 0);
}

如果你想使用模板引用，那么

<textarea cols="30" rows="4" #userinput></textarea>

在Ts文件中

@ViewChild('userinput') nameInputRef: ElementRef;