CODEWITHSUNDEEP
javascripthtml
k.drm
k.drm

Reputation: 61

How to copy text and paste into a textarea using JS?

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.

Upvotes: 3

Views: 9615

Answers (3)

Chris Li
Chris Li

Reputation: 2671

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>

Upvotes: 3

michaelitoh
michaelitoh

Reputation: 2340

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>

Upvotes: 1

Saif Taher
Saif Taher

Reputation: 343

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...

Upvotes: 1

Related Questions