from - Copie el resultado de una variable de JavaScript en el portapapeles

javascript send string to clipboard

Question

No tengo conocimiento de JavaScript, pero logré armar este código usando bits y tornillos de varias respuestas de Stack Overflow. Funciona bien y genera una matriz de todas las casillas de verificación seleccionadas en un documento a través de un cuadro de alerta.

function getSelectedCheckboxes(chkboxName) {
  var checkbx = [];
  var chkboxes = document.getElementsByName(chkboxName);
  var nr_chkboxes = chkboxes.length;
  for(var i=0; i<nr_chkboxes; i++) {
    if(chkboxes[i].type == ''checkbox'' && chkboxes[i].checked == true) checkbx.push(chkboxes[i].value);
  }
  return checkbx;
}

Y para llamarlo uso:

<button id="btn_test" type="button" >Check</button>
<script>
    document.getElementById(''btn_test'').onclick = function() {
        var checkedBoxes = getSelectedCheckboxes("my_id");
        alert(checkedBoxes);
    }
</script>

Ahora me gustaría modificarlo para que cuando haga clic en el botón btn_test la matriz de salida checkbx se copie en el portapapeles. Intenté agregar:

checkbx = document.execCommand("copy");

o

checkbx.execCommand("copy");

al final de la función y luego llamarlo así:

<button id="btn_test" type="button" onclick="getSelectedCheckboxes(''my_id'')">Check</button>

Pero no funciona. No se copian datos al portapapeles.

Answer 1

Al momento de escribir, configurar display:none en el elemento no funcionó para mí. Establecer el ancho y la altura del elemento en 0 tampoco funcionó. Por lo tanto, el elemento debe tener al menos 1 1px de ancho para que esto funcione.

El siguiente ejemplo funcionó en Chrome y Firefox:

const str = ''Copy me''; const el = document.createElement("input"); // Does not work: // dummy.style.display = "none"; el.style.height = ''0px''; // Does not work: // el.style.width = ''0px''; el.style.width = ''1px''; document.body.appendChild(el); el.value = str; el.select(); document.execCommand("copy"); document.body.removeChild(el);

Me gustaría agregar que puedo ver por qué los navegadores están tratando de evitar este enfoque hack. Es mejor mostrar abiertamente el contenido que va a copiar en el navegador del usuario. Pero a veces hay requisitos de diseño, no podemos cambiar.

Answer 2

Bien, encontré algo de tiempo y seguí la sugerencia de Teemu y pude obtener exactamente lo que quería.

Así que aquí está el código final para cualquiera que pueda estar interesado. Para aclarar, este código obtiene todas las casillas marcadas de una determinada ID, las genera en una matriz, llamada aquí checkbx , y luego copia su nombre único en el portapapeles.

Función de JavaScript:

function getSelectedCheckboxes(chkboxName) {
  var checkbx = [];
  var chkboxes = document.getElementsByName(chkboxName);
  var nr_chkboxes = chkboxes.length;
  for(var i=0; i<nr_chkboxes; i++) {
    if(chkboxes[i].type == ''checkbox'' && chkboxes[i].checked == true) checkbx.push(chkboxes[i].value);
  }
  checkbx.toString();

  // Create a dummy input to copy the string array inside it
  var dummy = document.createElement("input");

  // Add it to the document
  document.body.appendChild(dummy);

  // Set its ID
  dummy.setAttribute("id", "dummy_id");

  // Output the array into it
  document.getElementById("dummy_id").value=checkbx;

  // Select it
  dummy.select();

  // Copy its contents
  document.execCommand("copy");

  // Remove it as its not needed anymore
  document.body.removeChild(dummy);
}

Y su llamada HTML:

<button id="btn_test" type="button" onclick="getSelectedCheckboxes(''ID_of_chkbxs_selected'')">Copy</button>

Answer 3

Cuando necesite copiar una variable al portapapeles en la consola de desarrollo de Chrome, simplemente puede usar el comando copy() .

https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#copyobject

Answer 4

Logré copiar texto en el portapapeles ( sin mostrar ningún cuadro de texto ) agregando un elemento de input oculto al body , es decir:

 function copy(txt){
  var cb = document.getElementById("cb");
  cb.value = txt;
  cb.style.display=''block'';
  cb.select();
  document.execCommand(''copy'');
  cb.style.display=''none'';
 }

<button onclick="copy(''Hello Clipboard!'')"> copy </button>
<input id="cb" type="text" hidden>

Answer 5

Muy útil. Lo modifiqué para copiar un valor variable de JavaScript al portapapeles:

function copyToClipboard(val){
    var dummy = document.createElement("input");
    dummy.style.display = ''none'';
    document.body.appendChild(dummy);

    dummy.setAttribute("id", "dummy_id");
    document.getElementById("dummy_id").value=val;
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
}

Answer 6

Para propósitos generales de copiar cualquier texto al portapapeles, escribí la siguiente función:

function textToClipboard (text) {
    var dummy = document.createElement("textarea");
    document.body.appendChild(dummy);
    dummy.value = text;
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
}

El valor del parámetro se inserta en el valor de un <textarea> recién creado, que luego se selecciona, su valor se copia en el portapapeles y luego se elimina del documento.

Answer 7

Solo quiero agregar, si alguien quiere copiar dos entradas diferentes al portapapeles. También utilicé la técnica de ponerlo en una variable y luego colocar el texto de la variable de las dos entradas en un área de texto.

Nota: el siguiente código es de un usuario que pregunta cómo copiar múltiples entradas de usuario en el portapapeles. Simplemente lo arreglé para que funcione correctamente. Así que espere un estilo antiguo como el uso de var lugar de let o const . También recomiendo usar addEventListener para el botón.

    function doCopy() {

        try{
            var unique = document.querySelectorAll(''.unique'');
            var msg ="";

            unique.forEach(function (unique) {
                msg+=unique.value;
            });

            var temp =document.createElement("textarea");
            var tempMsg = document.createTextNode(msg);
            temp.appendChild(tempMsg);

            document.body.appendChild(temp);
            temp.select();
            document.execCommand("copy");
            document.body.removeChild(temp);
            console.log("Success!")


        }
        catch(err) {

            console.log("There was an error copying");
        }
    }

<input type="text" class="unique" size="9" value="SESA / D-ID:" readonly/>
<input type="text" class="unique" size="18" value="">
<button id="copybtn" onclick="doCopy()"> Copy to clipboard </button>

Answer 8

function copyToClipboard(text) {
    var dummy = document.createElement("textarea");
    // to avoid breaking orgain page when copying more words
    // cant copy when adding below this code
    // dummy.style.display = ''none''
    document.body.appendChild(dummy);
    //Be careful if you use texarea. setAttribute(''value'', value), which works with "input" does not work with "textarea". – Eduard
    dummy.value = text;
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
}
copyToClipboard(''hello world'')
copyToClipboard(''hello/nworld'')