Copier dans le Presse-papiers pour tous les navigateurs utilisant JavaScript

Question

J'essayais de faire "Copier dans le presse-papier" sur tous les navigateurs, mais pas de chance.

J'utilise javascript et je ne veux pas utiliser Zero Clipboard .

S'il vous plaît laissez-nous savoir ce qui ne va pas dans mon code.

Merci pour votre aide.

Vous trouverez ci-dessous le code (mon code ne fonctionne actuellement que sur le navigateur IE): -

 <script type="text/javascript">
function copyToClipboard(s)
{
    if( window.clipboardData && clipboardData.setData )
    {
        clipboardData.setData("Text", s);
    }
    else
    {
        // You have to sign the code to enable this or allow the action in about:config by changing
        user_pref("signed.applets.codebase_principal_support", true);
        netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');

        var clip = Components.classes['@mozilla.org/widget/clipboard;[[[[1]]]]'].createInstance(Components.interfaces.nsIClipboard);
        if (!clip) return;

        // create a transferable
        var trans = Components.classes['@mozilla.org/widget/transferable;[[[[1]]]]'].createInstance(Components.interfaces.nsITransferable);
        if (!trans) return;

        // specify the data we wish to handle. Plaintext in this case.
        trans.addDataFlavor('text/unicode');

        // To get the data from the transferable we need two new objects
        var str = new Object();
        var len = new Object();

        var str = Components.classes["@mozilla.org/supports-string;[[[[1]]]]"].createInstance(Components.interfaces.nsISupportsString);

        var copytext=meintext;

        str.data=copytext;

        trans.setTransferData("text/unicode",str,copytext.length*[[[[2]]]]);

        var clipid=Components.interfaces.nsIClipboard;

        if (!clip) return false;

        clip.setData(trans,null,clipid.kGlobalClipboard);      
    }
}
</script>

<textarea id='testText' rows="10" cols="100">Enter your Sample text</textarea><br />
<button onclick="copyToClipboard(document.getElementById('testText').value);" >clipboard</button><br /><br />
<textarea rows="10" cols="100">Paste your text here</textarea><br />
 

Answer 1

Cela fonctionne sur firefox 3.6.x et IE:

     function copyToClipboardCrossbrowser(s) {           
        s = document.getElementById(s).value;               

        if( window.clipboardData && clipboardData.setData )
        {
            clipboardData.setData("Text", s);
        }           
        else
        {
            // You have to sign the code to enable this or allow the action in about:config by changing
            //user_pref("signed.applets.codebase_principal_support", true);
            netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');

            var clip = Components.classes["@mozilla.org/widget/clipboard;1"].createInstance(Components.interfaces.nsIClipboard);
            if (!clip) return;

            // create a transferable

            var trans = Components.classes["@mozilla.org/widget/transferable;1"].createInstance(Components.interfaces.nsITransferable);
            if (!trans) return;

            // specify the data we wish to handle. Plaintext in this case.
            trans.addDataFlavor('text/unicode');

            // To get the data from the transferable we need two new objects
            var str = new Object();
            var len = new Object();

            var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);

            str.data= s;        

            trans.setTransferData("text/unicode",str, str.data.length * 2);

            var clipid=Components.interfaces.nsIClipboard;              
            if (!clip) return false;
            clip.setData(trans,null,clipid.kGlobalClipboard);      
        }
    }
 

Answer 2

J'ai passé beaucoup de temps à chercher une solution à ce problème aussi. Voici ce que j'ai trouvé jusqu'à présent:

Si vous voulez que vos utilisateurs d'être en mesure de cliquer sur un bouton pour copier du texte, vous pourriez avoir à utiliser le Flash.

Si vous voulez que vos utilisateurs appuyez sur Ctrl+C n'importe où sur la page, mais toujours copier xyz dans le presse-papiers, j'ai écrit un tout-JS solution dans YUI3 (bien qu'il pourrait facilement être porté avec d'autres cadres, ou raw JS si vous vous sentez particulièrement de dégoût de soi).

Il s'agit de créer une zone de texte de l'écran qui se mis en évidence dès que l'utilisateur appuie sur Ctrl/CMD. Quand ils ont frappé "C", peu de temps après, ils ont copier le texte caché. Si ils ont frappé un 'V', ils redirigé vers un récipient (de votre choix) avant de le coller événement se déclenche.

Cette méthode fonctionne bien, parce que pendant que vous écoutez de la touche Ctrl/CMD keydown n'importe où dans le corps, le 'A', 'C' ou 'V' keydown d'auditeurs seulement joindre la face cachée de la zone de texte (et non de l'ensemble du corps). Il également n'a pas à casser les attentes des utilisateurs - vous seulement obtenir redirigé vers la case masqué si vous aviez rien n'est sélectionné pour la copie de toute façon!

Voici ce que j'ai eu à travailler sur mon site, mais il faut vérifier http://at.cg/js/clipboard.js pour les mises à jour si il y a de tout:

YUI.add('clipboard', function(Y) {


// Change this to the id of the text area you would like to always paste in to:

pasteBox = Y.one('#pasteDIV');


// Make a hidden textbox somewhere off the page.

Y.one('body').append('<input id="copyBox" type="text" name="result" style="position:fixed; top:-20%;" onkeyup="pasteBox.focus()">');
copyBox = Y.one('#copyBox');


// Key bindings for Ctrl+A, Ctrl+C, Ctrl+V, etc:

// Catch Ctrl/Window/Apple keydown anywhere on the page.
Y.on('key', function(e) {
    copyData();
        //  Uncomment below alert and remove keyCodes after 'down:' to figure out keyCodes for other buttons.
        //  alert(e.keyCode);
        //  }, 'body',  'down:', Y);
}, 'body',  'down:91,224,17', Y);

// Catch V - BUT ONLY WHEN PRESSED IN THE copyBox!!!
Y.on('key', function(e) {
    // Oh no! The user wants to paste, but their about to paste into the hidden #copyBox!!
    // Luckily, pastes happen on keyPress (which is why if you hold down the V you get lots of pastes), and we caught the V on keyDown (before keyPress).
    // Thus, if we're quick, we can redirect the user to the right box and they can unload their paste into the appropriate container. phew.
    pasteBox.select();
}, '#copyBox',  'down:86', Y);

// Catch A - BUT ONLY WHEN PRESSED IN THE copyBox!!!
Y.on('key', function(e) {
    // User wants to select all - but he/she is in the hidden #copyBox! That wont do.. select the pasteBox instead (which is probably where they wanted to be).
    pasteBox.select();
}, '#copyBox',  'down:65', Y);



// What to do when keybindings are fired:

// User has pressed Ctrl/Meta, and is probably about to press A,C or V. If they've got nothing selected, or have selected what you want them to copy, redirect to the hidden copyBox!
function copyData() {
    var txt = '';
    // props to Sabarinathan Arthanari for sharing with the world how to get the selected text on a page, cheers mate!
        if (window.getSelection) { txt = window.getSelection(); }
        else if (document.getSelection) { txt = document.getSelection(); }
        else if (document.selection) { txt = document.selection.createRange().text; }
        else alert('Something went wrong and I have no idea why - please contact me with your browser type (Firefox, Safari, etc) and what you tried to copy and I will fix this immediately!');

    // If the user has nothing selected after pressing Ctrl/Meta, they might want to copy what you want them to copy. 
        if(txt=='') {
                copyBox.select();
        }
    // They also might have manually selected what you wanted them to copy! How unnecessary! Maybe now is the time to tell them how silly they are..?!
        else if (txt == copyBox.get('value')) {
        alert('This site uses advanced copy/paste technology, possibly from the future.\n \nYou do not need to select things manually - just press Ctrl+C! \n \n(Ctrl+V will always paste to the main box too.)');
                copyBox.select();
        } else {
                // They also might have selected something completely different! If so, let them. It's only fair.
        }
}
});

J'espère que quelqu'un d'autre trouve cela utile :]

Answer 3

Pour des raisons de sécurité, la plupart des navigateurs ne permettent pas de modifier le presse-papiers (sauf IE, bien sûr ...).

Le seul moyen de rendre une fonction de copie vers le presse-papier compatible avec plusieurs navigateurs est d’utiliser Flash.

Answer 4

Je pense que zeroclipboard est génial. cette version fonctionne avec la dernière version de Flash 11: http://www.itjungles.com/javascript/javascript-easy-cross-browser-copy-to-clipboard-solution .