First of all, the program works fine, the only problem is with the copy function.
Well, I'll start by giving a brief explanation, I have a code that is used to copy the result of my program, but when it is copied, something like this happens:
Result:
This is the result.
This program is fine.
(Which copies me) This is the result. This program is fine.
My question is how can I make it not copy the "br"? So what I'm trying to achieve is that the output that shows me on the clipboard is the result with the line breaks included but without the br
Wow, I want that:
Line 1 like this
Line 2 like this
Line 3 like this
The line that comes to where the program ends like this
It already shows me that in the result, but when copying it it doesn't happen the same as you can see, the problem is when you press "control + v" to be able to paste the answer, the format is affected and it converts it into a single line
I leave you my code so you can see if it is due to some mistake of mine.
<!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>
The error is located here:
{html += c1 +' '+ p[i] +' '+ c2 + "<br>"; resultado.innerHTML = html;}
By using span and referenced by id, it paints what's inside the result as text, as opposed to
document.write
inserting it into your codehtml
, which would recognize itbr
as a tag, not a piece of text.This is how you do what you want:
This is the result:
First of all, in an input you cannot save a formatted text, you must do it in a
textarea
and the second is to use the propertyinnerText
instead ofinnerHTML
since one brings you "the inner html document" while the other brings you "the text in the inside with its formatting (if it were an element with text formatting)"I made the changes made in the function
copiarAlPortapapeles