2

//En el momento este código sólo Copia pero no lo hace conservando el formato

<!DOCTYPE html>
<html>
<body>

<b><p id="demo">Caso con formato.</p></b>
 <button onclick="ejecutar('demo')">Copiar</button>  <BR><BR>

<script>

function ejecutar(idelemento){
     var aux = document.createElement("input");
  aux.setAttribute("value", document.getElementById(idelemento).innerHTML);
  document.body.appendChild(aux);
  aux.select();
  document.execCommand("copy");
  document.body.removeChild(aux);
}
</script>

</body>
</html> 

1
  • 1
    Creo que ese es mi código, gracias por apuntar los fallos. Lo he modificado un poco y ahora te pongo una respuesta
    – Alvaro Montoro
    el 20 abr. 2017 a las 17:07

1 respuesta 1

3

Buen ojo. Ese código no va a funcionar correctamente si quieres que se copie el formato porque lo que se está haciendo es copiar el contenido del elemento indicado como valor de un input de tipo text por lo que el código HTML se va a "perder".

Una solución sería copiar el contenido del elemento a un div que sea contentEditable, de ese modo el formato no se perderá cuando se copie. Aquí te dejo un ejemplo:

Nota: he modificado un poco tu HTML porque no era válido y nunca se iba a copiar el formato

Dale al botón de copiar y luego pulsa en la caja de texto (es un div editable y pega el texto). Ahora se copiará con negrita.

function ejecutar(idelemento){
  var aux = document.createElement("div");
  aux.setAttribute("contentEditable", true);
  aux.innerHTML = document.getElementById(idelemento).innerHTML;
  aux.setAttribute("onfocus", "document.execCommand('selectAll',false,null)"); 
  document.body.appendChild(aux);
  aux.focus();
  document.execCommand("copy");
  document.body.removeChild(aux);
}
#destino {
  width:400px;
  height:100px;
  border:1px solid #ccc;
}
<p id="demo"><b>Caso con formato.</b></p>
<button onclick="ejecutar('demo')">Copiar</button> 


<div id="destino" contentEditable="true">
</div>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.