如何使用JS复制文本并将其粘贴到textarea中？

Question

I am looking for a solution how to copy text and then paste a new text automatic in textarea. I found solutions, but based on jquery I'm looking for something simple on clean js.

 function copyToClipboard(elementId) { // Create a "hidden" input var aux = document.createElement("input"); // Assign it the value of the specified element aux.setAttribute("value", document.getElementById(elementId).innerHTML); // Append it to the body document.body.appendChild(aux); // Highlight its content aux.select(); // Copy the highlighted text document.execCommand("copy"); // Remove it from the body document.body.removeChild(aux); let textarea = document.getElementById("select-this"); textarea.focus(); } 

 <div class="wrapper"> <p id="p1">P1: I am paragraph 1</p> <p id="p2">P2: I am a second paragraph</p> <p id="p3">P3: I am a 3 paragraph</p> <button onclick="copyToClipboard('p1')">Copy P1</button> <button onclick="copyToClipboard('p2')">Copy P2</button> <button onclick="copyToClipboard('p3')">Copy P3</button> <br/><br/> <textarea id="select-this" value="I just copied this with only JavaScript"/></textarea> </div> 

I found some solutions, but I still do not know how to make the text automatically appear in textarea after pressing the button.

Answer 1

ummm...You are REALLY over-complicating stuff...

Just use the following JS:

 let textarea = document.getElementById("select-this"); textarea.focus(); function changeTextarea(elementId) { textarea.innerHTML = document.body.querySelector(elementId).innerHTML; } 

and edit the HTML of the buttons as follows:

 <button onclick="changeTextarea('#p1')">Copy P1</button> <button onclick="changeTextarea('#p2')">Copy P2</button> <button onclick="changeTextarea('#p3')">Copy P3</button> 

You don't need to copy and then paste the values of the paragraphs to the <textarea> . Just change it using the innerHTML property...

Answer 2

append the copied value to value of textarea everytime you run copyToClipboard

 function copyToClipboard(elementId) { // Create a "hidden" input var aux = document.createElement("input"); // Assign it the value of the specified element aux.setAttribute("value", document.getElementById(elementId).innerHTML); // Append it to the body document.body.appendChild(aux); // Highlight its content aux.select(); // Copy the highlighted text document.execCommand("copy"); // Remove it from the body document.body.removeChild(aux); let textarea = document.getElementById("select-this"); textarea.focus(); textarea.value += document.getElementById(elementId).innerHTML } 

 <div class="wrapper"> <p id="p1">P1: I am paragraph 1</p> <p id="p2">P2: I am a second paragraph</p> <p id="p3">P3: I am a 3 paragraph</p> <button onclick="copyToClipboard('p1')">Copy P1</button> <button onclick="copyToClipboard('p2')">Copy P2</button> <button onclick="copyToClipboard('p3')">Copy P3</button> <br/><br/> <textarea id="select-this" value="I just copied this with only JavaScript"/></textarea> </div> 

Answer 3

I've a simple solution for that, just using the part of the code you have.

 function copyToClipboard(elementId) { var text = document.getElementById(elementId).innerHTML; let textarea = document.getElementById("select-this"); textarea.innerHTML = text; textarea.focus(); } 

  <p id="p1">P1: I am paragraph 1</p> <p id="p2">P2: I am a second paragraph</p> <p id="p3">P3: I am a 3 paragraph</p> <button onclick="copyToClipboard('p1')">Copy P1</button> <button onclick="copyToClipboard('p2')">Copy P2</button> <button onclick="copyToClipboard('p3')">Copy P3</button> <br><br> <textarea id="select-this" value="I just copied this with only JavaScript"/></textarea> </div>