0

Estoy intentando hacer una funcion en mi web, para que los usuarios vayan seleccionado diferentes cosas y luego puedan copiarlas desde el input con un botón.

He usado un código que he visto en la web, pero no cuando vas añadiendo contenido en forma de lista no se añade en lista.

La idea sería que se quedara asi:

LA IDEA

EL CODIGO AQUI:

   
<!DOCTYPE html>
<html>
<head>
<!DOCTYPE html>
<html>
<head>
  <title>Unir texto</title>
  <meta charset="UTF-8">
</head>
<body>

<form name="prueba" autocomplete="off">
<input type="text"id="textB"  value="Has pedido: " style="display:none;" />
<br><br>
   Texto introducido
<br>   
<textarea name="textC" id="textC" cols="50" rows="10"></textarea>
<br>
</form>
<script>
function unirTexto(){
var c1=document.getElementById('textB').value;
var t1=document.getElementById('textC').value;
  var p = t1;
  var resultado = document.getElementById('resultado');
  var html = "";
   for (var i = 0; i < p.length; i++)  {html = c1 +' '+ t1 +' '+ "<br>"; resultado.innerHTML = html;}
   document.getElementById("resultado").innerHTML = html;
  ;}
function limpiar() {
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>

2
  • A ver si te entiendo, lo que quieres ( según la imagen que compartes ) es que cada elemento que pusiste en la caja de texto, al hacer click en Unir ¿Aparezca abajo también en una nueva línea?
    – FranAcuna
    Commented el 11 ene. 2021 a las 20:03
  • Exactamente. Que aparezca el contenido de la caja de texto según se vaya añadiendo. Si se añade en lista, que aparezca y se copie en lista. Commented el 12 ene. 2021 a las 10:37

1 respuesta 1

0

Te ofrezco un método diferente para "Unir" las palabras, el cuál consiste en agarrar el texto, convertirlo en un array (detectando los espacios) y luego generar un elemento de párrafo para cada elemento.

Para la parte de copiar tienes que entender que necesitas remplazar los espacios que encuentras en el area de texto por la secuencia de escape para nueva línea \r\n y además debes de utilizar un elemento que permita el formato correcto de texto como un textarea.

<!DOCTYPE html>
<html>

<head>
  <!DOCTYPE html>
  <html>

  <head>
    <title>Unir texto</title>
    <meta charset="UTF-8">
  </head>

  <body>

    <form name="prueba" autocomplete="off">
      <input type="text" id="textB" value="Has pedido: " style="display:none;" />
      <br><br> Texto introducido
      <br>
      <textarea name="textC" id="textC" cols="50" rows="10"></textarea>
      <br>
    </form>
    <script>
      function unirTexto() {

        //Obten el elemento donde pondras el resultado final
        let resultado = document.getElementById('resultado');

        //Obten el texto de la caja
        //Trata siempre de usar nombres de variables descriptivos
        let areaTexto = document.getElementById('textC').value;

        //Separa por espacios para obtener cada palabra
        let arrayPalabras = areaTexto.split(" ");

        //Inicializa el resultado
        resultado.innerHTML = "<p>Has pedido:<p>";

        //Itera sobre el array de palabras y agregalas
        arrayPalabras.forEach(palabra => {
          resultado.innerHTML += `<p>${palabra}<p>`
        });

      }

      function limpiar() {
        document.getElementById('textB').value = "";
        document.getElementById('textC').value = "";
        resultado.innerHTML = " ";
        copia.value = "";
      }
      //acá está la función --------------------------------------------------------
      function copiarAlPortapapeles(id_elemento) {
        //Usa text area que mantiene el formato de texto
        var aux = document.createElement("textarea");
        //Agrega el elemento axuiliar
        document.body.appendChild(aux);
        //Reemmplaza los espacios en toda la string por los caracteres de nueva linea
        let aCopiar = document.getElementById('textC').value.replace(/ /g, "\r\n");

        //Asigna, selecciona y copia
        aux.innerHTML = aCopiar;
        aux.select();
        document.execCommand("copy");
        //Remueve
        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>

2
  • Funciona gracias! Pero al copiar, no copia la parte que dice 'Has pedido:' Commented el 12 ene. 2021 a las 19:16
  • Solamente es de agregarlo a la variable aCopiar.
    – FranAcuna
    Commented el 12 ene. 2021 a las 19:19

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.