Copier / mettre du texte dans le presse-papiers avec FireFox, Safari et Chrome

113

Dans Internet Explorer, je peux utiliser l'objet clipboardData pour accéder au presse-papiers. Comment puis-je faire cela dans FireFox, Safari et / ou Chrome?

GvS
la source
Si vous souhaitez faire cela dans la console Chrome, vous pouvez utiliser copy, developer.chrome.com/devtools/docs/commandline-api
wener
1
@ bjb568, la question que vous mentionnez a été saisie plus tard, c'est donc le double
GvS
@GvS Il n'est pas toujours question de savoir lequel est publié en premier. L'autre était plus populaire et a obtenu plus de réponses. Si vous le souhaitez, indiquez-le pour qu'un modérateur puisse fusionner les questions.
bjb568
Réponse bien documentée dans stackoverflow.com/a/30810322/712334
Josh Habdas

Réponses:

21

Il existe maintenant un moyen de le faire facilement dans la plupart des navigateurs modernes en utilisant

document.execCommand('copy');

Cela copiera le texte actuellement sélectionné. Vous pouvez sélectionner une zone de texte ou un champ de saisie à l'aide de

document.getElementById('myText').select();

Pour copier du texte de manière invisible, vous pouvez générer rapidement un textArea, modifier le texte dans la zone, le sélectionner, le copier, puis supprimer le textArea. Dans la plupart des cas, ce textArea ne clignotera même pas sur l'écran.

Pour des raisons de sécurité, les navigateurs ne vous autoriseront à copier que si un utilisateur entreprend une action (par exemple, en cliquant sur un bouton). Une façon de le faire serait d'ajouter un événement onClick à un bouton html qui appelle une méthode qui copie le texte.

Un exemple complet:

function copier(){
  document.getElementById('myText').select();
  document.execCommand('copy');
}
<button onclick="copier()">Copy</button>
<textarea id="myText">Copy me PLEASE!!!</textarea>

pythonHelpRequired
la source
50

Pour des raisons de sécurité, Firefox ne vous permet pas de placer du texte dans le presse-papiers. Cependant, il existe une solution de contournement disponible à l'aide de Flash.

function copyIntoClipboard(text) {

    var flashId = 'flashId-HKxmj5';

    /* Replace this with your clipboard.swf location */
    var clipboardSWF = 'http://appengine.bravo9.com/copy-into-clipboard/clipboard.swf';

    if(!document.getElementById(flashId)) {
        var div = document.createElement('div');
        div.id = flashId;
        document.body.appendChild(div);
    }
    document.getElementById(flashId).innerHTML = '';
    var content = '<embed src="' + 
        clipboardSWF +
        '" FlashVars="clipboard=' + encodeURIComponent(text) +
        '" width="0" height="0" type="application/x-shockwave-flash"></embed>';
    document.getElementById(flashId).innerHTML = content;
}

Le seul inconvénient est que cela nécessite l'activation de Flash.

la source est actuellement morte: http://bravo9.com/journal/copying-text-into-the-clipboard-with-javascript-in-firefox-safari-ie-opera-292559a2-cc6c-4ebf-9724-d23e8bc5ad8a/ ( et c'est aussi le cache de Google )

ine
la source
17
Un troisième inconvénient est qu'il ne fonctionnera pas localement (file: //) sans modifier les autorisations sur Flash. code.google.com/p/zeroclipboard est une bibliothèque construite autour de cette méthode.
Regis Frey
@ b1naryatr0phy: Vrai pour la plupart, mais HTML5 n'a toujours pas de remplacement pour la fonctionnalité de presse-papiers actuellement proposée par Flash (par exemple en utilisant ZeroClipboard).
James M. Greene
3
Depuis 2014, cette méthode ne fonctionne plus dans aucun navigateur moderne. ZeroClipboard est la seule technologie qui résout actuellement ce problème
Cozzamara
En septembre 2015, Flash est en train de mourir d'une mort relativement rapide et ZeroClipboard est basé sur son utilisation. Voir ma réponse ci-dessous d'août 2015 pour une solution qui n'utilise pas Flash.
un codeur le
10

C'est l'été 2015, et avec tant de remous autour de Flash, j'ai pensé ajouter une nouvelle réponse à cette question qui évite complètement son utilisation.

clipboard.js est un utilitaire sympa qui permet de copier du texte ou des données html dans le presse-papiers. C'est très facile à utiliser, il suffit d'inclure le .js et d'utiliser quelque chose comme ceci:

<button id='markup-copy'>Copy Button</button>

<script>
document.getElementById('markup-copy').addEventListener('click', function() {
  clipboard.copy({
    'text/plain': 'Markup text. Paste me into a rich text editor.',
    'text/html': '<i>here</i> is some <b>rich text</b>'
  }).then(
    function(){console.log('success'); },
    function(err){console.log('failure', err);
  });

});
</script>

clipboard.js est également sur GitHub

un codeur
la source
1
Le premier lien que vous fournissez (vers npmjs.com) indique que cela ne fonctionne pas avec IE, mais c'est le cas (comme en fait il le dit sur GitHub)
gordon613
9

En 2017, vous pouvez le faire (en disant cela parce que ce fil a presque 9 ans!)

function copyStringToClipboard (string) {
    function handler (event){
        event.clipboardData.setData('text/plain', string);
        event.preventDefault();
        document.removeEventListener('copy', handler, true);
    }

    document.addEventListener('copy', handler, true);
    document.execCommand('copy');
}

Et maintenant pour copier copyStringToClipboard('Hello World')

Si vous avez remarqué la setDataligne et que vous vous demandez si vous pouvez définir différents types de données, la réponse est oui.

Chad Scira
la source
pour safari, j'avais besoin d'exécuter un .select()sur une zone de saisie avant d'appeler cela.
Chad Scira
Devez-vous également supprimer l'écouteur d'événements?
Chris Walsh
1
@ChrisWalsh Oui, cela se fait dans le gestionnaire de l'exemple de code. La raison en est que le gestionnaire sera toujours en mémoire sinon.
Spoike
8

Firefox vous permet de stocker des données dans le presse-papiers, mais pour des raisons de sécurité, il est désactivé par défaut. Découvrez comment l'activer dans "Accorder l'accès JavaScript au presse-papiers" dans la base de connaissances de Mozilla Firefox.

La solution proposée par amdfan est la meilleure si vous avez beaucoup d'utilisateurs et que la configuration de leur navigateur n'est pas une option. Bien que vous puissiez tester si le presse-papiers est disponible et fournir un lien pour modifier les paramètres, si les utilisateurs sont experts en technologie. L'éditeur JavaScript TinyMCE suit cette approche.

Troels Thomsen
la source
5

La fonction copyIntoClipboard () fonctionne pour Flash 9, mais elle semble être interrompue par la sortie de Flash player 10. Voici une solution qui fonctionne avec le nouveau lecteur flash:

http://bowser.macminicolo.net/~jhuckaby/zeroclipboard/

C'est une solution complexe, mais cela fonctionne.

Andomar
la source
6
Ce n'est pas cassé. Il a été supprimé de la dernière API pour des raisons de sécurité
Glycerine
4

Je dois dire qu'aucune de ces solutions ne fonctionne vraiment . J'ai essayé la solution de presse-papiers de la réponse acceptée, et cela ne fonctionne pas avec Flash Player 10. J'ai également essayé ZeroClipboard, et j'en ai été très satisfait pendant un certain temps.

Je l'utilise actuellement sur mon propre site ( http://www.blogtrog.com ), mais j'ai remarqué des bugs étranges avec. Le fonctionnement de ZeroClipboard est qu'il place un objet flash invisible au-dessus d'un élément de votre page. J'ai constaté que si mon élément bouge (comme lorsque l'utilisateur redimensionne la fenêtre et que les choses sont alignées à droite), l'objet flash ZeroClipboard se déséquilibre et ne couvre plus l'objet. Je soupçonne qu'il est probablement toujours là où il était à l'origine. Ils ont du code censé arrêter cela, ou le recoller sur l'élément, mais cela ne semble pas bien fonctionner.

Donc ... dans la prochaine version de BlogTrog, je suppose que je vais emboîter le pas avec tous les autres surligneurs de code que j'ai vus dans la nature et supprimer mon bouton Copier dans le presse-papiers. :-(

(J'ai remarqué que la copie dans le presse-papiers de dp.syntaxhiglighter est également cassée.)

Dave Haynes
la source
3
C'est triste quand la fonctionnalité doit faire un pas en arrière au nom de la sécurité. J'aurais vraiment aimé qu'il y ait une solution à la fois sécurisée et toujours autorisée à accéder au presse-papiers à partir d'une page Web, même si l'utilisateur doit lui accorder une autorisation explicite une fois ou quelque chose.
devios1
C'est ce que fait IE par défaut
Matthew Lock
3

question bien trop ancienne mais je n'ai vu cette réponse nulle part ...

Vérifiez ce lien:

http://kb.mozillazine.org/Granting_JavaScript_access_to_the_clipboard

comme tout le monde l'a dit, pour des raisons de sécurité, il est désactivé par défaut. le lien ci-dessus montre les instructions pour l'activer (en éditant about: config dans firefox ou le user.js).

Heureusement, il existe un plugin appelé "AllowClipboardHelper" qui rend les choses plus faciles en quelques clics seulement. Cependant, vous devez toujours indiquer aux visiteurs de votre site Web comment activer l'accès dans Firefox.

Pablo
la source
Vous ne pensez pas qu'il existe quelque chose comme ça pour Chrome / WebKit?
devios1
3

Utilisez moderne document.execCommand ("copy") et jQuery. Voir cette réponse stackoverflow

var ClipboardHelper = { // as Object

copyElement: function ($element)
{
   this.copyText($element.text())
},
copyText:function(text) // Linebreaks with \n
{
    var $tempInput =  $("<textarea>");
    $("body").append($tempInput);
    $tempInput.val(text).select();
    document.execCommand("copy");
    $tempInput.remove();
}};

Comment appeler:

 ClipboardHelper.copyText('Hello\nWorld');
 ClipboardHelper.copyElement($('body h1').first());

// JQUERY DOCUMENT
;(function ( $, window, document, undefined ) {
  
  var ClipboardHelper = {

    copyElement: function ($element)
    {
       this.copyText($element.text())
    },
    copyText:function(text) // Linebreaks with \n
    {
        var $tempInput =  $("<textarea>");
        $("body").append($tempInput);
      
        //todo prepare Text: remove double whitespaces, trim
        
        $tempInput.val(text).select();
        document.execCommand("copy");
        $tempInput.remove();
    }
};

    $(document).ready(function()
    {
         var $body=$('body');
         
        $body.on('click', '*[data-copy-text-to-clipboard]', function(event) 
        {
            var $btn=$(this);
            var text=$btn.attr('data-copy-text-to-clipboard');
            ClipboardHelper.copyText(text);
        });
      
        $body.on('click', '.js-copy-element-to-clipboard', function(event) 
        {
            ClipboardHelper.copyElement($(this));
        });

    });


})( jQuery, window, document );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<span data-copy-text-to-clipboard=
"Hello
 World">
  Copy Text
</span>
<br><br>
<span class="js-copy-element-to-clipboard">
Hello
World 
Element
</span>

David de Studio.201
la source
2

J'ai utilisé Clippy de Github pour mes besoins, un simple bouton basé sur Flash. Fonctionne très bien, si l'on n'a pas besoin de style et que l'on est heureux d'insérer au préalable ce qu'il faut coller côté serveur.

Dr1Ku
la source
1

Une légère amélioration par rapport à la solution Flash consiste à détecter le flash 10 à l'aide de swfobject:

http://code.google.com/p/swfobject/

puis s'il apparaît comme flash 10, essayez de charger un objet Shockwave en utilisant javascript. Shockwave peut également lire / écrire dans le presse-papiers (dans toutes les versions) en utilisant la commande copyToClipboard () dans le jargon.

Travis
la source
1

http://www.rodsdot.com/ee/cross_browser_clipboard_copy_with_pop_over_message.asp fonctionne avec Flash 10 et tous les navigateurs compatibles Flash.

De plus, ZeroClipboard a été mis à jour pour éviter le bogue mentionné sur le défilement de la page qui empêche l'animation Flash d'être au bon endroit.

Puisque cette méthode "oblige" l'utilisateur à cliquer sur un bouton pour copier, c'est une commodité pour l'utilisateur et rien de néfaste ne se produit.

rdivilbiss
la source
1

essayez de créer une variable globale mémoire stockant la sélection, puis l'autre fonction peut accéder à la variable et faire un collage par exemple.

var memory = '';//outside the functions but within the script tag.

function moz_stringCopy(DOMEle,firstPos,secondPos) {

var copiedString = DOMEle.value.slice(firstPos, secondPos);
memory = copiedString;

}

function moz_stringPaste(DOMEle, newpos) {

    DOMEle.value = DOMEle.value.slice(0,newpos) + memory + DOMEle.value.slice(newpos);

}
David Barrett
la source
3
pourrait copier de n'importe où ailleurs sans considérer l'intérieur de la page seule
Marwan
1

Si vous supportez le flash, vous pouvez utiliser https://everyplay.com/assets/clipboard.swf et utiliser le texte flashvars pour définir le texte

https://everyplay.com/assets/clipboard.swf?text=It%20Works

C'est celui que j'utilise pour copier et vous pouvez définir comme extra si ne prend pas en charge ces options que vous pouvez utiliser:

Pour Internet Explorer: window.clipboardData.setData (DataFormat, Text) et window.clipboardData.getData (DataFormat)

Vous pouvez utiliser le texte et l'URL du DataFormat pour getData et setData.

Et pour supprimer des données:

Vous pouvez utiliser le fichier, le HTML, l'image, le texte et l'URL du DataFormat. PS: vous devez utiliser window.clipboardData.clearData (DataFormat);

Et pour les autres qui ne prennent pas en charge les fichiers flash window.clipboardData et swf, vous pouvez également utiliser le bouton Ctrl + C de votre clavier pour Windows et pour Mac, sa commande + c

Utilisateur
la source
1

Utilisez document.execCommand('copy'). Pris en charge dans les dernières versions de Chrome, Firefox, Edgeet Safari.

function copyText(text){
  function selectElementText(element) {
    if (document.selection) {
      var range = document.body.createTextRange();
      range.moveToElementText(element);
      range.select();
    } else if (window.getSelection) {
      var range = document.createRange();
      range.selectNode(element);
      window.getSelection().removeAllRanges();
      window.getSelection().addRange(range);
    }
  }
  var element = document.createElement('DIV');
  element.textContent = text;
  document.body.appendChild(element);
  selectElementText(element);
  document.execCommand('copy');
  element.remove();
}


var txt = document.getElementById('txt');
var btn = document.getElementById('btn');
btn.addEventListener('click', function(){
  copyText(txt.value);
})
<input id="txt" value="Hello World!" />
<button id="btn">Copy To Clipboard</button>

Trevor
la source
1

L'API Clipboard est conçue pour remplacer document.execCommand. Safari travaille toujours sur le support, vous devez donc fournir une solution de secours jusqu'à ce que les spécifications soient réglées et que Safari termine l'implémentation.

const permalink = document.querySelector('[rel="bookmark"]');
const output = document.querySelector('output');
permalink.onclick = evt => {
  evt.preventDefault();
  window.navigator.clipboard.writeText(
    permalink.href
  ).then(() => {
    output.textContent = 'Copied';
  }, () => {
    output.textContent = 'Not copied';
  });
};
<a href="/programming/127040/" rel="bookmark">Permalink</a>
<output></output>

Pour des raisons de sécurité, le presse Permissions- papiers peut être nécessaire pour lire et écrire à partir du presse-papiers. Si l'extrait de code ne fonctionne pas sur SO, essayez-le localhostou un domaine de confiance.

Josh Habdas
la source
1

S'appuyant sur l'excellente réponse de @David de Studio.201, cela fonctionne dans Safari, FF et Chrome. Cela garantit également qu'aucun clignotement ne peut se produire à partir du textareaen le plaçant hors de l'écran.

// ================================================================================
// ClipboardClass
// ================================================================================
var ClipboardClass = (function() {


   function copyText(text) {
    // Create temp element off-screen to hold text.
        var tempElem = $('<textarea style="position: absolute; top: -8888px; left: -8888px">');
        $("body").append(tempElem);

        tempElem.val(text).select();
        document.execCommand("copy");
        tempElem.remove();
   }


    // ============================================================================
   // Class API
   // ============================================================================
    return {
        copyText: copyText
    };
})();
Crashalot
la source