Comment faire pour copier dans le presse-papiers en JavaScript?

Question

Quel est le meilleur moyen pour copier du texte dans le presse-papiers? (multi-navigateur)

J'ai essayé:

function copyToClipboard(text)
{
    if (window.clipboardData) // Internet Explorer
    {  
        window.clipboardData.setData("Text", text);
    }
    else
    {  
        unsafeWindow.netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");  
        const clipboardHelper = Components.classes["@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);  
        clipboardHelper.copyString(text);
    }
}

mais dans Internet Explorer, il donne une erreur de syntaxe. Dans Firefox, il est dit "unsafeWindow n'est pas défini".

Modifier Un joli truc sans flash: Comment Trello d'accès de l'utilisateur presse-papiers?

Answer 1

Automatique de la copie vers le presse-papiers peut être dangereux, donc la plupart des navigateurs (sauf IE), il est très difficile. Personnellement, j'utilise la suite des truc simple:

function copyToClipboard(text) {
  window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
}

L'utilisateur est présenté avec la zone d'invite, où le texte à copier est déjà sélectionné. Maintenant, il suffit d'appuyer sur Ctrl+C et Entrez (pour fermer la boîte) -- et le tour est joué!

Maintenant le presse-papiers de l'opération de copie est SÛR, parce que l'utilisateur n'manuellement (mais dans une jolie façon simple). Bien sûr, fonctionne dans tous les navigateurs.

Answer 2

La lecture et la modification du presse-papiers à partir d'une page web soulève de sécurité et de confidentialité. Cependant, dans Internet Explorer, il est possible de le faire. J'ai trouvé ce fragment exemple:

<script type="text/javascript">
    function select_all(obj) {
        var text_val=eval(obj);
        text_val.focus();
        text_val.select();
        if (!document.all) return; // IE only
        r = text_val.createTextRange();
        r.execCommand('copy');
    }
</script>
<input value="http://www.sajithmr.com"
 onclick="select_all(this)" name="url" type="text" />

Answer 3

Si vous voulez vraiment une solution simple (prend moins de 5 minutes à intégrer) et semble bon droit sorti de la boîte, puis trombine le trombone est une bonne alternative à certains de la plus complexe des solutions ci-dessus.

Trombine le trombone

C'est la même copie de la solution utilisée sur Github. Exemple Flash code d'intégration ci-dessous:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
        width="110"
        height="14"
        id="clippy" >
<param name="movie" value="/flash/clippy.swf"/>
<param name="allowScriptAccess" value="always" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param NAME="FlashVars" value="text=#{text}">
<param name="bgcolor" value="#{bgcolor}">
<embed src="/flash/clippy.swf"
       width="110"
       height="14"
       name="clippy"
       quality="high"
       allowScriptAccess="always"
       type="application/x-shockwave-flash"
       pluginspage="http://www.macromedia.com/go/getflashplayer"
       FlashVars="text=#{text}"
       bgcolor="#{bgcolor}"
/>
</object>

N'oubliez pas de remplacer #{text} avec le texte copié, et #{bgcolor} avec une couleur.

Answer 4

ZeroClipboard est le meilleur de la croix-navigateur solution que j'ai trouvé:

<div id="copy" data-clipboard-text="Copy Me!">Click to copy</div>    
<script src="ZeroClipboard.js"></script>
<script>
  var clip = new ZeroClipboard( document.getElementById('copy') );
</script>

Si vous avez besoin non support de flash pour iOS, il suffit d'ajouter une solution de repli:

clip.on( 'noflash', function ( client, args ) {
    $("#copy").click(function(){            
        var txt = $(this).attr('data-clipboard-text');
        prompt ("Copy link, then click OK.", txt);
    });
});  

http://zeroclipboard.org/

https://github.com/zeroclipboard/ZeroClipboard

Answer 5

À partir de l'un des projets sur lesquels j'ai travaillé, jQuery copie vers le presse-papiers plugin qui utilise le Zéro presse-papiers de la bibliothèque.

Il est plus facile à utiliser que le natif de Zéro presse-papiers plugin si vous êtes un grand utilisateur jQuery.