Copier / mettre du texte sur le bloc-notes avec FireFox, Safari et Chrome

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?

105
demandé sur GvS 2008-09-24 17:12:57

17 réponses

il y a 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 un champ textArea ou input en utilisant

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

pour copier invisiblement un texte, vous pouvez rapidement générer un textArea, modifier le texte dans la case, le sélectionner, le copier, puis supprimer le textArea. Dans la plupart des cas, ce texte ne clignote même pas sur l'écran.

pour la sécurité raisons, les navigateurs ne vous permettent copie si un utilisateur effectue une action (ie. en cliquant sur un bouton). Une façon de le faire serait d'ajouter un événement onClick d'un bouton html qui appelle une méthode de copie de texte.

Un exemple complet ressemblerait à

<html>
<head>
    <title>copy test</title>
</head>
<body>
    <button onclick="copier()">Copy</button>
    <textarea id="myText">Copy me PLEASE!!!</textarea>

    <script>
        function copier(){
            document.getElementById('myText').select();
            document.execCommand('copy');
        }
    </script>
</body>
</html>
13
répondu pythonHelpRequired 2015-12-02 18:47:30

pour des raisons de sécurité, Firefox ne vous permet pas de placer du texte sur le presse-papiers. Cependant, il y a une solution de rechange 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 Flash pour être activé.

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 / (and so is it's cache de Google )

52
répondu ine 2015-11-14 14:28:32

feuilles de calcul en ligne hook Ctrl+C, CTRL+V événements et de transférer la mise au point à un contrôle TextArea caché et soit régler son contenu à de nouveaux contenus de presse-papiers souhaités pour la copie ou lire son contenu après l'événement avait terminé pour la pâte.

voir aussi est-il possible de lire le bloc-notes En Firefox, Safari et Chrome en utilisant Javascript?

13
répondu agsamek 2017-05-23 11:54:40

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.

bloc-notes.js est un utilitaire agréable 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>

bloc-notes.js est également sur GitHub

10
répondu a coder 2015-08-11 15:26:21

Firefox ne vous permet de stocker des données dans le presse-papiers, mais en raison des implications de sécurité, il est désactivé par défaut. Voir comment l'activer dans " accorder L'accès JavaScript au bloc-notes " dans la base de connaissances Mozilla Firefox.

la solution offerte par amdfan est la meilleure si vous avez beaucoup d'utilisateurs et configurer leur navigateur n'est pas une option. Bien que vous puissiez tester si le presse-papiers est disponible et fournir un lien pour changer les paramètres, si les utilisateurs sont technophiles. L'éditeur JavaScript TinyMCE suit cette approche.

8
répondu Troels Thomsen 2008-09-24 13:22:08

en 2017 vous pouvez faire cela (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 de copier copyStringToClipboard('Hello World')

si vous avez remarqué la ligne setData , et vous êtes demandé si vous pouvez définir différents types de données, la réponse est oui.

6
répondu Chad Scira 2017-04-18 22:35:04

la fonction copieintoclipboard() fonctionne pour Flash 9, mais il semble être cassé par la libération 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 ça marche.

5
répondu Andomar 2009-01-13 22:12:49

je dois dire qu'aucune de ces solutions vraiment ne fonctionne. J'ai essayé la solution de bloc-notes à partir de la réponse acceptée, et il ne fonctionne pas avec Flash Player 10. J'ai également essayé ZeroClipboard, et j'ai été très heureux avec elle pendant un certain temps.

Je l'utilise actuellement sur mon propre site ( http://www.blogtrog.com ), mais j'ai remarqué des bugs bizarres avec. La façon dont ZeroClipboard fonctionne est qu'il met un invisible objet flash sur le dessus d'un élément sur votre page. J'ai trouvé que si mon élément bouge (comme quand l'utilisateur redimensionne la fenêtre et que j'ai les choses alignées correctement), l'objet flash ZeroClipboard sort de la trajectoire et ne couvre plus l'objet. Je pense qu'il est probablement toujours 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.

So... dans la prochaine version de BlogTrog, je suppose Je vais suivre avec tous les autres surligneurs de code que j'ai vu dans la nature et enlever ma copie sur le bouton du bloc-notes. :- (

(j'ai remarqué que dp.la copie de syntaxhiglighter au Bloc-Notes est cassée aussi maintenant.)

4
répondu Dave Haynes 2009-02-07 02:01:46

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

vérifier 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é est par défaut désactivé. le lien ci-dessus montre les instructions pour l'activer (en éditant sur:config dans firefox ou l'utilisateur.js).

heureusement il y a un plugin appelé "AllowClipboardHelper" qui rend les choses plus faciles avec seulement quelques clics. cependant, vous devez toujours donner des instructions aux visiteurs de votre site web sur la façon d'activer l'accès dans firefox.

3
répondu Pablo 2011-04-08 22:32:32

utiliser un document moderne.execCommand ("copy") et jQuery. voir la réponse à cette question

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 téléphoner:

 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>
2
répondu David from Studio.201 2017-05-23 12:03:05

une légère amélioration par rapport à la solution Flash est de détecter pour flash 10 en utilisant swfobject:

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

et ensuite s'il s'affiche comme flash 10, essayez de charger un objet Shockwave en utilisant javascript. Shockwave peut lire/écrire dans le presse-papiers (dans toutes les versions) ainsi qu'en utilisant la commande copyToClipboard () en lingo.

1
répondu Travis 2009-06-01 08:42:35

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

aussi ZeroClipboard a été mis à jour pour éviter le bug mentionné sur le défilement de la page faisant en sorte que le film Flash ne soit plus au bon endroit.

puisque cette méthode "nécessite" l'utilisateur de cliquer sur un bouton pour copier ceci est une commodité pour l'utilisateur et rien de Maléfique est produire.

1
répondu rdivilbiss 2010-10-11 20:48:44

si vous supportez 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 supporte pas ces options que vous pouvez utiliser:

Pour Internet Explorer: fenêtre.clipboardData.setData (DataFormat, texte) et window.clipboardData.getData (DataFormat)

vous pouvez utiliser le texte et L'Url de la DataFormat pour getData et setData.

et supprimer les données:

vous pouvez utiliser le fichier de DataFormat, HTML, Image, texte et URL. PS: Vous Devez Utiliser la fenêtre.clipboardData.clearData (DataFormat);

et pour les autres thats ne supporte pas la fenêtre.clipboardData et fichiers flash swf vous pouvez également utilisez ctrl + c sur votre clavier pour windows et pour mac sa commande + c

1
répondu User 2013-11-06 17:06:23

du code addon:

dans le cas où quelqu'un d'autre cherchait comment le faire à partir du code chrome, vous pouvez utiliser l'interface nsIClipboardHelper comme décrit ici: https://developer.mozilla.org/en-US/docs/Using_the_Clipboard

1
répondu 2014-12-31 23:35:59

utiliser document.execCommand('copy') . Pris en charge dans les dernières versions de Chrome , Firefox , Edge , et 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>
1
répondu Trevor 2017-01-18 00:41:37

essayez de créer une variable globale de mémoire stockant la sélection, alors l'autre fonction peut accéder à la variable et faire une pâte 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);

}
0
répondu David Barrett 2011-03-24 17:31:38