Copie la sortie D'une variable JavaScript dans le presse-papiers

Je n'ai aucune connaissance de JavaScript, mais j'ai réussi à assembler ce code en utilisant des bits et des boulons provenant de diverses réponses de débordement de pile. Cela fonctionne bien, et il génère un tableau de toutes les cases à cocher sélectionnées dans un document via une zone d'alerte.

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;
}

Et pour l'appeler, j'utilise: 

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

Maintenant, je voudrais le modifier de sorte que lorsque je clique sur le bouton btn_test, Le tableau de sortie checkbx est copié dans le presse-papiers. J'ai essayé d'ajouter:

checkbx = document.execCommand("copy");

Ou

checkbx.execCommand("copy");

À la fin de la fonction et puis l'appeler comme: 

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

Mais ça ne marche pas. Aucune donnée n'est copiée dans le presse-papiers.

21
demandé sur Peter Mortensen 2015-11-22 17:04:27

5 réponses

OK, j'ai trouvé du temps et j'ai suivi la suggestion de Teemu et j'ai pu obtenir exactement ce que je voulais.

Voici Donc le code final pour ceux qui pourraient être intéressés. Pour plus de précisions, ce code obtient toutes les cases à cocher d'un certain ID, les affiche dans un tableau, nommé ici checkbx, puis copie leur nom unique dans le presse-papiers.

Fonction 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);
}

Et son appel HTML: 

<button id="btn_test" type="button" onclick="getSelectedCheckboxes('ID_of_chkbxs_selected')">Copy</button>
22
répondu harman 2018-03-06 10:55:20

L'idée de Lbrutti d'une réponse est bonne, mais il écrit un mauvais code!

function copyToClipboard(text){
    var dummy = document.createElement("input");
    document.body.appendChild(dummy);
    dummy.setAttribute('value', text);
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
}
copyToClipboard('Hello, World!')
18
répondu walkman 2018-03-06 11:02:03

Très utile. Je l'ai modifié pour copier une valeur de variable JavaScript dans le presse-papiers: 

function copyToClipboard(val){
    var dummy = document.createElement("input");
    document.body.appendChild(dummy);
    $(dummy).css('display','none');
    dummy.setAttribute("id", "dummy_id");
    document.getElementById("dummy_id").value=val;
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
}
8
répondu lbrutti 2018-03-06 10:56:38

À des fins générales de copie de tout texte dans le presse-papiers, j'ai écrit la fonction suivante: 

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

La valeur du paramètre est inséré dans la valeur d'un nouvellement créé <textarea>, qui est ensuite sélectionné, sa valeur est copiée dans le presse-papiers, puis il est supprimé du document.

5
répondu ChlapecSHudbou 2018-01-31 12:31:54

Je veux juste ajouter, si quelqu'un veut copier deux entrées différentes dans le presse-papiers. J'ai également utilisé la technique de le mettre à une variable puis mettre le texte de la variable à partir des deux entrées dans une zone de texte.

Remarque: le code ci-dessous provient d'un utilisateur demandant comment copier plusieurs entrées utilisateur dans le presse-papiers. Je viens de le réparer pour fonctionner correctement. Attendez-vous donc à un style ancien comme l'utilisation de var au lieu de let ou const. Je recommande également d'utiliser addEventListener pour le bouton.

    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>
0
répondu Richard Ramos 2018-08-04 11:22:44