从Angular中的textarea复制到剪贴板

Question

I am trying to copy text from a HTML textarea, however I only found a solution with an Input tag like this:

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

Function:

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

When I want to replace the input tag with a textarea tag it doesn't work anymore. Is there an similar easy solution with a textarea?

Answer 1

Try like this:

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>

Create a Variable in Ts file As String And Using Property binding bind this with Text area value

 userinput: string;


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

if You want to use template reference then

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

in Ts file

@ViewChild('userinput') nameInputRef: ElementRef;