Copier / insérer du texte dans le presse-papiers avec FireFox, Safari et Chrome

Pour des raisons de sécurité, Firefox ne vous permet pas de placer le texte dans le presse-papiers. Cependant, il y a un travail autour de disponibles à 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 Flash pour être activé.

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

C'est l'Été 2015, et à tant d'agitation environnante Flash je pensais ajouter une nouvelle réponse à cette question qui évite complètement son utilisation.

clipboard.js est une belle utilitaire qui permet de copier du texte ou des données html dans le presse-papiers. Il est très facile à utiliser, il suffit d'inclure l' .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

Firefox ne permet pas de stocker les données dans le presse-papiers, mais en raison des implications en matière de sécurité, il est désactivé par défaut. Voir comment l'activer dans "L'octroi de l'accès JavaScript dans le presse-papiers" dans le navigateur Mozilla Firefox de la base de connaissances.

La solution proposée par amdfan est le meilleur si vous avez un grand nombre d'utilisateurs et la configuration de leur navigateur n'est pas une option. Si vous pouviez tester si le presse-papiers est disponible et de fournir un lien pour changer les paramètres, si les utilisateurs sont technophiles. L'éditeur de JavaScript De TinyMCE suit cette approche.

Je dois dire qu'aucune de ces solutions vraiment travail. J'ai essayé de le presse-papiers solution de la accepté de répondre, et il ne fonctionne pas avec Flash Player 10. J'ai aussi essayé de ZeroClipboard, et j'ai été très heureux avec elle pendant un certain temps.

Je suis en train de l'utiliser sur mon propre site (http://www.blogtrog.com), mais j'ai remarqué de bizarre bugs avec elle. La façon ZeroClipboard œuvres, c'est qu'il met invisible objet flash sur le dessus d'un élément sur votre page. J'ai trouvé que si mon élément se déplace (comme lorsque l'utilisateur redimensionne la fenêtre et j'ai des choses aligné à droite), le ZeroClipboard objet flash devient hors de contrôle et n'est plus couvrant l'objet. Je soupçonne que c'est probablement encore assis là où il était à l'origine. Ils ont un code qui est censé arrêter, ou de recoller à l'élément, mais il ne semble pas bien fonctionner.

Donc... dans la prochaine version de BlogTrog, je crois que je vais suivre avec tous les autres code surligneurs j'ai vu dans la nature et retirer mon Copier dans le presse bouton. 🙁

(J'ai remarqué que dp.syntaxhiglighter de la Copier dans le presse-papiers est cassé maintenant aussi.)

J'ai utilisé de Github Trombine le trombone pour mes besoins, simples à base de Flash, bouton. Fonctionne très bien, si l'on n'a pas besoin de style et est heureux avec insertion de ce que pour coller sur le côté serveur à l'avance.

Une légère amélioration de la mémoire Flash, la solution est de détecter les pour flash 10 à l'aide de swfobject:

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

et puis si il montre que flash 10, essayez de charger une onde de Choc de l'objet à l'aide de javascript. Onde de choc peut lire/écrire dans le presse-papiers(dans toutes les versions) et à l'aide de la copyToClipboard() la commande dans le jargon.

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

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

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

Pour Internet Explorer: fenêtre.clipboardData.setData(Format, Texte) et de la fenêtre.clipboardData.getData(Format)

Vous pouvez utiliser le Format de Texte et l'Url de getData et setData.

Et supprimer des données:

Vous pouvez utiliser le Format de Fichier, HTML, Image, Texte et l'URL. PS: Vous Devez Utiliser la fenêtre.clipboardData.clearData(Format);

Et pour d'autres ce n'est pas l'appui de la fenêtre.clipboardData et flash swf fichiers, vous pouvez également utiliser ctrl + c sur votre clavier pour windows et pour mac sa commande + c

Utilisation document.execCommand('copy'). Pris en charge dans les versions les plus récentes de Chrome, Firefox, Edge, et Safari.

JS:

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

HTML:

<input id="txt" value="Hello World!" />
<button id="btn">Copy To Clipboard</button>

Presse-papiers de l'API est conçue pour remplacer les document.execCommand. Safari est encore de travail sur le soutien de sorte que vous devrait fournir une solution de secours jusqu'à ce spec s'installe et Safari finitions de mise en œuvre.

JS:

const permalink = document.querySelector('[]');
const output = document.querySelector('output');
permalink.onclick = evt => {
  evt.preventDefault();
  window.navigator.clipboard.writeText(
    permalink.href
  ).then(() => {
    output.textContent = 'Copied';
  }, () => {
    output.textContent = 'Not copied';
  });
};

HTML:

<a href="https://stackoverflow.com/questions/127040/" rel="bookmark">Permalink</a>
<output></output>

Pour des raisons de sécurité, presse-papiers Permissions peuvent être nécessaires pour lire et écrire à partir du presse-papiers. Si l'extrait de code ne fonctionne pas sur ALORS, donnez-lui un coup de feu sur localhost ou un domaine de confiance.