Estoy buscando una solución para copiar texto y luego pegar un nuevo texto automáticamente en textarea. Encontré soluciones, pero basado en jquery estoy buscando algo simple en 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>

Encontré algunas soluciones, pero aún no sé cómo hacer que el texto aparezca automáticamente en el área de texto después de presionar el botón.

2
k.drm 8 sep. 2018 a las 22:22

3 respuestas

La mejor respuesta

Agregue el valor copiado al valor de textarea cada vez que ejecute 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>
1
Rachel Gallen 8 sep. 2018 a las 19:49

Ummm ... Estás REALMENTE complicando demasiado las cosas ...

Simplemente use el siguiente JS:

let textarea = document.getElementById("select-this");
textarea.focus();

function changeTextarea(elementId) {
  textarea.innerHTML = document.body.querySelector(elementId).innerHTML;
}

Y edite el HTML de los botones de la siguiente manera:

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

No necesita copiar y luego pegar los valores de los párrafos en <textarea>. Simplemente cámbielo usando la propiedad innerHTML ...

1
Saif Taher 8 sep. 2018 a las 19:38

Tengo una solución simple para eso, simplemente usando la parte del código que tienes.

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>
1
michaelitoh 8 sep. 2018 a las 19:49