web-dev-qa-db-fra.com

Copier 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 éléments de différentes réponses de Stack Overflow. Cela fonctionne bien et génère un tableau de toutes les cases à cocher sélectionnées dans un document via une boîte 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, j'aimerais le modifier pour que lorsque je clique sur le bouton btn_test le tableau de sortie checkbx soit copié dans le presse-papiers. J'ai essayé d'ajouter:

checkbx = document.execCommand("copy");

ou

checkbx.execCommand("copy");

à la fin de la fonction puis en l'appelant ainsi:

<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-papier.

javascriptcopyclipboard
29
harman

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

Donc, voici le code final pour quiconque pourrait être intéressé. Pour plus de précision, ce code obtient toutes les cases à cocher cochées 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>
28
harman

la réponse de lbrutti est bonne, mais il écrit un code erroné!

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!')
31
walkman

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);
}
10
lbrutti

À des fins générales de copie de 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ée dans la valeur d'un <textarea> nouvellement créé, qui est ensuite sélectionné, sa valeur est copiée dans le Presse-papiers, puis il est supprimé du document.

9
Peter Paulovics

Lorsque vous devez copier une variable dans le Presse-papiers de la console de développement de Chrome, vous pouvez simplement utiliser la commande copy().

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

1
Evgeny

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

Remarque: le code ci-dessous provient d'un utilisateur qui demande comment copier plusieurs entrées d'utilisateur dans le Presse-papiers. Je viens de le réparer pour qu'il fonctionne 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
Richard Ramos