web-dev-qa-db-fra.com

Copier dans le presse-papiers avec jQuery/js dans Chrome

Je sais que ce genre de question a été posée ici à plusieurs reprises, y compris: Comment copier dans le presse-papiers en JavaScript? ou Comment copier du texte dans le presse-papier du client à l'aide de jQuery? , je rétrécis la portée:

État:

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

Existe-t-il une telle solution ou solution de contournement?

javascriptjquerygoogle-chromeclipboardcopy-paste
31
Sam Su

Je viens de trouver un autre repo incroyable sur Github.

Copie moderne dans le presse-papier. Pas de flash. Juste 3kb gzippé

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

Prise en charge du navigateur:

12
Sam Su

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

1. copier la sélection sur l'événement personnalisé

Si vous souhaitez déclencher une copy sur un événement autre que ctrl-c ou copier avec le bouton droit de la souris, 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 demande 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 l'événement de copie et vous pouvez y placer le contenu que vous voulez. Cet utilisateur suppose que la copie est déclenchée.

MODIFIER:

Sur Chrome, Firefox et Safari, l'événement comporte l'objet clipboardData avec la méthode setData. Sur IE, l'objet clipboardData est une propriété de fenêtre. Cela peut donc fonctionner sur tous les principaux navigateurs à condition de valider 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/clipboardDatahttps://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. Ainsi, le premier événement déclenche execCommand, puis le listener interfère. Par exemple, placez le 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');
    }

});

L'utilisation de cette dernière suppose que les deux approches sont supportées. Depuis juillet 2015, cela ne fonctionne que sur Chrome 43 (peut-être 42 ans, je n'ai pas pu tester) et sur IE au moins 9 et 10. Avec Firefox 41 prenant en charge execcommand('copy'), cela devrait également fonctionner.

Notez que pour la plupart de ces méthodes et propriétés sont déclarées comme étant expérimentales (voire 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/

27
Julien Grégoire

Une chaîne variable peut être copiée dans le presse-papier 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');
7
Suneth Senanayake

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

J'ai réécrit le code pour l'améliorer un peu à 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
Joel Harkes

Attention: j'ai essayé le même script que Julien Grégoire, mais cela n'a pas déclenché l'auditeur d'événement oncopy. La raison, j’avais le CSS sélectionné par l’utilisateur pour le tag body.

Veillez donc à le supprimer ou définissez-le sur initial sur l'élément auquel l'écouteur d'événement est attaché.

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

0
Tim

Si vous utilisez KO, comme moi (pour une raison quelconque, je le suis toujours), vous voudrez jeter un coup d'œil à cette question/réponse:

Comment faire en sorte que KnokoutJS et ClipboardJS fonctionnent ensemble?

0
João Antunes