Question Copier dans le presse papier avec jQuery / js dans Chrome


Je sais que ce genre de question a été posée ici plusieurs fois, notamment: Comment puis-je copier dans le presse-papier en JavaScript? ou Comment copier du texte dans le presse-papiers du client en utilisant jQuery?, Je restreins la portée:

Condition:

  1. fonctionne bien dans Google Chrome (serait bien si cross-navigateur, mais pas nécessaire)
  2. sans flash

Y a-t-il une telle solution ou solution de contournement?


28
2018-04-22 05:23


origine


Réponses:


Vous pouvez utiliser soit document.execCommand('copy') ou addEventListener('copy'), ou une combinaison des deux.

1. copie sélection sur événement personnalisé

Si vous voulez déclencher une copy sur un autre événement que ctrl-c ou faites un clic droit copier, vous utilisez document.execCommand('copy'). Il va copier ce qui est actuellement sélectionné. Comme ça, sur mouseup par exemple:

elem.onmouseup = function(){
    document.execCommand('copy');
}

MODIFIER:

document.execCommand('copy') est pris en charge uniquement par Chrome 42, IE9 et Opera 29, mais sera pris en charge par firefox 41 (prévu pour septembre 2015). Notez que IE demandera normalement l'autorisation d'accéder au Presse-papiers.

https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

2. copier le contenu personnalisé sur la copie déclenchée par l'utilisateur

Ou, vous pouvez utiliser addEventListener('copy'), cela va interférer avec les événements de copie et vous pouvez y placer le contenu que vous voulez. Cela suppose que l'utilisateur déclenche une copie.

MODIFIER:

Sur Chrome, Firefox et Safari, l’événement a le clipboardData objet avec setData méthode. Sur IE, la clipboardData objet est une propriété de fenêtre. Donc, cela peut fonctionner sur tous les principaux navigateurs à condition que vous validiez où est clipboardData.

 elem2.addEventListener('copy', function (e) {
    e.preventDefault();
    if (e.clipboardData) {
        e.clipboardData.setData('text/plain', 'custom content');
    } else if (window.clipboardData) {
        window.clipboardData.setData('Text', 'custom content');
    }

});

https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent/clipboardData https://msdn.microsoft.com/en-us/library/ms535220(v=vs.85).aspx

3. un peu des deux

En utilisant une combinaison, vous pouvez copier du contenu personnalisé sur les événements souhaités. Donc, le premier événement se déclenche execCommand, puis le listener interfère. Par exemple, mettez un contenu personnalisé en cliquant sur un div.

  elem3.onclick = function () {
        document.execCommand('copy');
    }

   elem3.addEventListener('copy', function (e) {

    e.preventDefault();
    if (e.clipboardData) {
        e.clipboardData.setData('text/plain', 'custom content from click');
    } else if (window.clipboardData) {
        window.clipboardData.setData('Text', 'custom content from click');
    }

});

En utilisant ce dernier suppose que les deux approches sont supportées, à partir de juillet 2015, cela ne fonctionne que sur Chrome 43 (peut-être 42 je ne pouvais pas tester) et IE au moins 9 et 10. Avec Firefox 41 justificatif execcommand('copy'), ça devrait marcher aussi.

Notez que pour la plupart de ces méthodes et propriétés sont déclarées comme expérimentales (ou même obsolètes pour IE), elles doivent donc être utilisées avec précaution, mais il semble qu'elles soient de plus en plus prises en charge.

Violon avec tous les exemples: https://jsfiddle.net/jsLfnnvy/12/


24
2017-07-04 23:56



Je trouve juste un autre repo étonnant sur Github.

Copie moderne vers le presse-papiers. Pas de flash. Juste 3kb gzippés

https://github.com/zenorocha/clipboard.js

Support du navigateur:


11
2017-09-30 02:04



Chaîne variable peut copier dans le presse-papiers en utilisant le code js ci-dessous.

var text = 'text to copy';
var copyFrom = $('<textarea/>');
copyFrom.css({
 position: "absolute",
 left: "-1000px",
 top: "-1000px",
});
 copyFrom.text(text);
 $('body').append(copyFrom);
 copyFrom.select();
 document.execCommand('copy');

6
2017-09-21 16:25



En fait, pour ceux qui ont compris cela, je l'ai fait fonctionner en chrome sur la base de la réponse de @JulianGregoire.

Je réécris le code pour le rendre un peu meilleur à mon avis:

el.onclick = function () {
    var copy = function (e) {
        e.preventDefault();
        console.log('copy');
        var text = "blabla"
        if (e.clipboardData) {
            e.clipboardData.setData('text/plain', text);
        } else if (window.clipboardData) {
            window.clipboardData.setData('Text', text);
        }
    }
    window.addEventListener('copy', copy);
    document.execCommand('copy');
    window.removeEventListener('copy', copy);
}

2
2017-08-17 16:39



Attention: j'ai essayé exactement le même script que Julien Grégoire, mais cela n'a pas déclenché l'écoute de l'événement oncopy. La raison en était que j'ai sélectionné CSS pour la balise body.

Donc, assurez-vous de le supprimer ou de le définir sur initial sur l'élément auquel l'auditeur d'événement est attaché.

Exemple: https://jsfiddle.net/faimmedia/jsLfnnvy/80/


0
2018-02-26 13:26



Si vous utilisez knock-out, comme moi (pour quelque raison que je sois toujours), vous voudrez jeter un oeil à cette question / réponse:

Comment faire fonctionner KnokoutJS et ClipboardJS ensemble?


0
2017-12-07 12:05



function copyToClipboard(s) {
    if (window.clipboardData && clipboardData.setData) {
        clipboardData.setData('text', s);
    }
}

Ensuite, appelez la fonction avec le texte et cela devrait fonctionner.


-4
2017-10-26 21:59