3

Primero que nada, el programa funciona correctamente, el único problema es con la función de copiar.

Bien, empiezo dando una breve explicación, tengo un código que sirve para copiar el resultado de mi programa, pero cuando lo copia sucede algo de este estilo:

Resultado:

Este es el resultado.

Este programa está bien.

(Lo que me copia) Este es el resultado. introducir la descripción de la imagen aquí Este programa está bien. introducir la descripción de la imagen aquí

Mi pregunta es ¿Cómo puedo hacer que no me copie los "br"? Entonces, lo que trato de lograr es que la salida que me muestre en el porta papeles sea el resultado con los saltos de línea incluidos pero sin los br

Osea, quiero eso:

La línea 1 así

La línea 2 así

La línea 3 así

La línea que venga hasta donde termine el programa así

Eso ya me lo muestra en el resultado, pero al momento de copiarlo no sucede igual introducir la descripción de la imagen aquí como pueden ver, el problema está al presionar "control + v" para poder pegar la respuesta, el formato se ve afectado y lo convierte en una sola línea

Les dejo mi código para que puedan ver si es a causa de algún error mío.

<!DOCTYPE html>
<html>
<head>
  <title>Unir con salto de linea</title>
  <meta charset="UTF-8">
</head>
<body>

<form name="prueba" autocomplete="off">
   Primera Frase: <input type="text"id="textA" />
   Frase final: <input type="text"id="textB" />
<br><br>
   Contenido Medio
<br>   
<textarea name="textC" id="textC" cols="50" rows="10"></textarea>
<br>
</form>
<script>
function unirTexto(){
var c1=document.getElementById('textA').value;
var c2=document.getElementById('textB').value;
var t1=document.getElementById('textC').value;
var rt=document.getElementById('resultado');
  var p = t1.split(/\n/g);
  var resultado = document.getElementById('resultado');
  var html = "";
   for (var i = 0; i < p.length; i++) {html += c1 +' '+ p[i] +' '+ c2 + "<br>"; resultado.innerHTML = html;}}
function limpiar() {
document.getElementById('textA').value ="";
document.getElementById('textB').value ="";
document.getElementById('textC').value ="";
resultado.innerHTML = " ";
copia.value= "";
}
function copiarAlPortapapeles(id_elemento) {
  var aux = document.createElement("input");
  aux.setAttribute("value", document.getElementById(id_elemento).innerHTML);
  document.body.appendChild(aux);
  aux.select();
  document.execCommand("copy");
  document.body.removeChild(aux);
  }
</script>
<br>
<button onclick="unirTexto()" id="unir">Unir</button>
<button onclick="limpiar()" id="limpiar">Limpiar</button><br>
<p id="resultado"></p>
<br>
<button onclick="copiarAlPortapapeles('resultado')">Copiar resultado</button><br>
<textarea id="copia" type="text" placeholder="Pega aquí para probar"></textarea>
<br>   
</form>
</body>
</html>

2 respuestas 2

3

Antes que nada en un input no puedes guardar un texto con formato, debes hacerlo en un textarea y lo segundo es utilizar la propiedad innerText en vez de innerHTML ya que uno te trae "el documento html interior" mientras que el otro te trae "el texto en el interior con su formato(si fuese un elemento con formato de texto)"

los cambios realizados los hice en la funcion copiarAlPortapapeles

<!DOCTYPE html>
<html>
<head>
  <title>Unir con salto de linea</title>
  <meta charset="UTF-8">
</head>
<body>

<form name="prueba" autocomplete="off">
   Primera Frase: <input type="text"id="textA" />
   Frase final: <input type="text"id="textB" />
<br><br>
   Contenido Medio
<br>   
<textarea name="textC" id="textC" cols="50" rows="10"></textarea>
<br>
</form>
<script>
function unirTexto(){
var c1=document.getElementById('textA').value;
var c2=document.getElementById('textB').value;
var t1=document.getElementById('textC').value;
  var p = t1.split(/\n/g);
  var resultado = document.getElementById('resultado');
  var html = "";
   for (var i = 0; i < p.length; i++) {html += c1 +' '+ p[i] +' '+ c2 + "<br>"; resultado.innerHTML = html;}
   document.getElementById("resultado").innerHTML = html;
  ;}
function limpiar() {
document.getElementById('textA').value ="";
document.getElementById('textB').value ="";
document.getElementById('textC').value ="";
resultado.innerHTML = " ";
copia.value= "";}
//acá está la función --------------------------------------------------------
function copiarAlPortapapeles(id_elemento) {
  var aux = document.createElement("textarea");
  aux.innerHTML = document.getElementById(id_elemento).innerText;
  document.body.appendChild(aux);
  aux.select();
  document.execCommand("copy");
  document.body.removeChild(aux);}
</script>
<button onclick="unirTexto()" id="unir">Unir</button>
<button onclick="limpiar()" id="limpiar">Limpiar</button><br>
<p id="resultado"></p>
<br>
<button onclick="copiarAlPortapapeles('resultado')">Copiar resultado</button>
<textarea id="copia" type="text" placeholder="Pega aquí para probar"></textarea>
</body>
</html>

3
  • siendo así no copia nada
    – Gabriel
    Commented el 25 sept. 2018 a las 21:04
  • @Gabriel cambié la respuesta dado que me había equivocado en un comienzo
    – LPZadkiel
    Commented el 25 sept. 2018 a las 21:17
  • Perfecto, así era como quería que funcionara
    – Gabriel
    Commented el 25 sept. 2018 a las 21:18
3

El error se encuentra aquí:

{html += c1 +' '+ p[i] +' '+ c2 + "<br>"; resultado.innerHTML = html;}

Al usar span y el referenciado por el id, este pinta lo que hay dentro de resultado como texto, a diferencia de document.write que te lo insertaría en el código html, el cuál si reconocería el br como una etiqueta, y no como un trozo de texto.

Así realiza lo que tu deseas:

<!DOCTYPE html>
<html>
<head>
  <title>Unir con salto de linea</title>
  <meta charset="UTF-8">
</head>
<body>

<form name="prueba" autocomplete="off">
   Primera Frase: <input type="text"id="textA" />
   Frase final: <input type="text"id="textB" />
<br><br>
   Contenido Medio
<br>   
<textarea name="textC" id="textC" cols="50" rows="10"></textarea>
<br>
</form>
<script>
function unirTexto(){
var c1=document.getElementById('textA').value;
var c2=document.getElementById('textB').value;
var t1=document.getElementById('textC').value;
  var p = t1.split(/\n/g);
  var resultado = document.getElementById('resultado');
  var html = "";
   for (var i = 0; i < p.length; i++) {html += c1 +' '+ p[i] +' '+ c2 + "<br>"; resultado.innerHTML = html;}
   document.getElementById("resultado").innerHTML = html;
  ;}
function limpiar() {
document.getElementById('textA').value ="";
document.getElementById('textB').value ="";
document.getElementById('textC').value ="";
resultado.innerHTML = " ";
copia.value= "";}
//acá está la función --------------------------------------------------------
function copiarAlPortapapeles(id_elemento) {
  var aux = document.createElement("input");
  aux.setAttribute("value", document.getElementById(id_elemento).innerHTML.replace("<br>", " ")); // la función replace sustituye el primer parámetro si lo encuentra en tu cadena, por lo que pongas en el segundo parámetro de forma que elimina el br y lo sustituye por espacios en blanco, es decir, nada
  document.body.appendChild(aux);
  aux.select();
  document.execCommand("copy");
  document.body.removeChild(aux);}
</script>
<button onclick="unirTexto()" id="unir">Unir</button>
<button onclick="limpiar()" id="limpiar">Limpiar</button><br>
<p id="resultado"></p>
<br>
<button onclick="copiarAlPortapapeles('resultado')">Copiar resultado</button>
<input id="copia" type="text" placeholder="Pega aquí para probar" />
</body>
</html>

Este es el resultado:

Resultado de tu código

9
  • 1
    El único problema es que al no hacerlo con esa línea de código, no me reconoce los saltos de línea al mostrar el resultado. Es decir, que aunque el usuario presione la tecla enter, nunca bajará una línea en el resultado.
    – Gabriel
    Commented el 25 sept. 2018 a las 14:33
  • Prueba con la solución que acabo de sugerirte Commented el 25 sept. 2018 a las 14:38
  • acabo de intentar, pero document.write no me reconoce correctamente la variable y no realiza el salto de línea
    – Gabriel
    Commented el 25 sept. 2018 a las 14:48
  • Ya tienes tu solución en el código que he insertado en mi comentario editado, si es tu respuesta válida, por favor marca la respuesta como válida para que otros también puedan beneficiarse, saludos. Commented el 25 sept. 2018 a las 15:12
  • acabo de probar tu código, pero en realidad no es es lo que quiero, con tú código al darle al botón de unir borra todo y solo escribe el resultado en la pantalla, pero lo que yo trato de hacer es que al presionar el botón unir solo muestre el resultado como ya lo tengo y que luego al presionar el botón copiar, entonces que tome ese resultado y lo pase a portapapeles sin las etiquetas br de html que pone automaticamente debido a los saltos de línea.
    – Gabriel
    Commented el 25 sept. 2018 a las 15:20

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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