Quelle est la meilleure façon de 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, c'est écrit unsafeWindow is not defined.

Une bonne astuce sans flash: comment Trello accède-t-il au presse-papiers de l'utilisateur?

Aperçu

Il existe trois API de navigateur principales pour la copie dans le presse-papiers:

1. API Async Clipboard [navigator.clipboard.writeText]
   • Partie textuelle disponible dans Chrome 66 (mars 2018)
   • L'accès est asynchrone et utilise des promesses JavaScript , peut être écrit pour que les invites utilisateur de sécurité (si affichées) n'interrompent pas le JavaScript dans la page.
   • Le texte peut être copié dans le presse-papiers directement à partir d'une variable.
   • Prise en charge uniquement sur les pages diffusées via HTTPS.
   • Dans Chrome 66, les pages des onglets actifs peuvent écrire dans le presse-papiers sans invite d'autorisation.
2. document.execCommand('copy')
   • La plupart des navigateurs le prennent en charge en date d'avril 2015 (voir Prise en charge du navigateur ci-dessous).
   • L'accès est synchrone, c'est-à-dire qu'il arrête JavaScript dans la page jusqu'à ce qu'il soit terminé, y compris l'affichage et l'interaction de l'utilisateur avec les invites de sécurité.
   • Le texte est lu à partir du DOM et placé dans le presse-papiers.
   • Lors des tests ~ avril 2015, seul Internet Explorer a été noté comme affichant des invites d'autorisation lors de l'écriture dans le presse-papiers.
3. Remplacement de l'événement de copie
   • Voir la documentation de l'API Clipboard sur le remplacement de l'événement de copie .
   • Vous permet de modifier ce qui apparaît dans le presse-papiers à partir de n'importe quel événement de copie, peut inclure d'autres formats de données autres que du texte brut.
   • Non couvert ici car il ne répond pas directement à la question.

Notes générales de développement

Ne vous attendez pas à ce que les commandes liées au presse-papiers fonctionnent pendant que vous testez du code dans la console. Généralement, la page doit être active (API Async Clipboard) ou nécessite une interaction de l'utilisateur (par exemple un clic de l'utilisateur) pour permettre à ( document.execCommand('copy')) d'accéder au presse-papiers, voir ci-dessous pour plus de détails.

IMPORTANT (noté ici 2020/02/20)

Notez que puisque cette publication a été rédigée à l'origine, la dépréciation des autorisations dans les IFRAME d'origine croisée et d'autres "sandboxing" IFRAME empêche les boutons de démonstration intégrés "Exécuter un extrait de code" et "l'exemple codepen.io" de fonctionner dans certains navigateurs (y compris Chrome et Microsoft Edge). ).

Pour développer, créez votre propre page Web, servez-vous de cette page via une connexion HTTPS pour tester et développer.

Voici une page de test / démo qui montre le fonctionnement du code: https://deanmarktaylor.github.io/clipboard-test/

Async + Fallback

En raison du niveau de prise en charge du navigateur pour la nouvelle API Async Clipboard, vous souhaiterez probablement recourir à la document.execCommand('copy')méthode pour obtenir une bonne couverture du navigateur.

Voici un exemple simple (peut ne pas fonctionner intégré dans ce site, lisez la note "importante" ci-dessus):

function fallbackCopyTextToClipboard(text) {
  var textArea = document.createElement("textarea");
  textArea.value = text;
  
  // Avoid scrolling to bottom
  textArea.style.top = "0";
  textArea.style.left = "0";
  textArea.style.position = "fixed";

  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Fallback: Copying text command was ' + msg);
  } catch (err) {
    console.error('Fallback: Oops, unable to copy', err);
  }

  document.body.removeChild(textArea);
}
function copyTextToClipboard(text) {
  if (!navigator.clipboard) {
    fallbackCopyTextToClipboard(text);
    return;
  }
  navigator.clipboard.writeText(text).then(function() {
    console.log('Async: Copying to clipboard was successful!');
  }, function(err) {
    console.error('Async: Could not copy text: ', err);
  });
}

var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
  copyJaneBtn = document.querySelector('.js-copy-jane-btn');

copyBobBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Bob');
});


copyJaneBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Jane');
});

<div style="display:inline-block; vertical-align:top;">
  <button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
  <button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
  <textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:

  </textarea>
</div>

(l'exemple codepen.io peut ne pas fonctionner, lisez la note "importante" ci-dessus) Notez que cet extrait ne fonctionne pas bien dans l'aperçu intégré de Stack Overflow, vous pouvez l'essayer ici: https://codepen.io/DeanMarkTaylor/pen/RMRaJX?editors = 1011

API Async Clipboard

• Message d'annonce sur Chrome 66 (mars 2018)
• Référence à la documentation provisoire de l' API Async Clipboard

Notez qu'il est possible de "demander l'autorisation" et de tester l'accès au presse-papiers via l'API d'autorisations dans Chrome 66.

var text = "Example text to appear on clipboard";
navigator.clipboard.writeText(text).then(function() {
  console.log('Async: Copying to clipboard was successful!');
}, function(err) {
  console.error('Async: Could not copy text: ', err);
});

document.execCommand ('copie')

Le reste de cet article va dans les nuances et les détails de l' document.execCommand('copy')API.

Prise en charge du navigateur

Le document.execCommand('copy')support JavaScript a grandi, voir les liens ci-dessous pour les mises à jour du navigateur:

• Internet Explorer 10+ (bien que ce document indique une prise en charge d'Internet Explorer 5.5+).
• Google Chrome 43+ (~ avril 2015)
• Mozilla Firefox 41+ (livraison ~ septembre 2015)
• Opera 29+ (basé sur Chromium 42, ~ avril 2015)

Exemple simple

(peut ne pas fonctionner intégré dans ce site, lisez la note "importante" ci-dessus)

var copyTextareaBtn = document.querySelector('.js-textareacopybtn');

copyTextareaBtn.addEventListener('click', function(event) {
  var copyTextarea = document.querySelector('.js-copytextarea');
  copyTextarea.focus();
  copyTextarea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
});

<p>
  <button class="js-textareacopybtn" style="vertical-align:top;">Copy Textarea</button>
  <textarea class="js-copytextarea">Hello I'm some text</textarea>
</p>

Exemple complexe: copier dans le presse-papiers sans afficher d'entrée

L'exemple simple ci-dessus fonctionne très bien si un élément textareaou inputest visible à l'écran.

Dans certains cas, vous souhaiterez peut-être copier du texte dans le presse-papiers sans afficher d' élément input/ textarea. Voici un exemple de méthode pour contourner ce problème (essentiellement insérer un élément, copier dans le presse-papiers, supprimer un élément):

Testé avec Google Chrome 44, Firefox 42.0a1 et Internet Explorer 11.0.8600.17814.

(peut ne pas fonctionner intégré dans ce site, lisez la note "importante" ci-dessus)

function copyTextToClipboard(text) {
  var textArea = document.createElement("textarea");

  //
  // *** This styling is an extra step which is likely not required. ***
  //
  // Why is it here? To ensure:
  // 1. the element is able to have focus and selection.
  // 2. if element was to flash render it has minimal visual impact.
  // 3. less flakyness with selection and copying which **might** occur if
  //    the textarea element is not visible.
  //
  // The likelihood is the element won't even render, not even a
  // flash, so some of these are just precautions. However in
  // Internet Explorer the element is visible whilst the popup
  // box asking the user for permission for the web page to
  // copy to the clipboard.
  //

  // Place in top-left corner of screen regardless of scroll position.
  textArea.style.position = 'fixed';
  textArea.style.top = 0;
  textArea.style.left = 0;

  // Ensure it has a small width and height. Setting to 1px / 1em
  // doesn't work as this gives a negative w/h on some browsers.
  textArea.style.width = '2em';
  textArea.style.height = '2em';

  // We don't need padding, reducing the size if it does flash render.
  textArea.style.padding = 0;

  // Clean up any borders.
  textArea.style.border = 'none';
  textArea.style.outline = 'none';
  textArea.style.boxShadow = 'none';

  // Avoid flash of white box if rendered for any reason.
  textArea.style.background = 'transparent';


  textArea.value = text;

  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }

  document.body.removeChild(textArea);
}


var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
  copyJaneBtn = document.querySelector('.js-copy-jane-btn');

copyBobBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Bob');
});


copyJaneBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Jane');
});

<div style="display:inline-block; vertical-align:top;">
  <button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
  <button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
  <textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:

  </textarea>
</div>

Notes complémentaires

Fonctionne uniquement si l'utilisateur effectue une action

Tous les document.execCommand('copy')appels doivent être le résultat direct d'une action de l'utilisateur, par exemple un gestionnaire d'événements de clic. Il s'agit d'une mesure pour éviter de jouer avec le presse-papiers de l'utilisateur lorsqu'il ne s'y attend pas.

Consultez le post des développeurs Google ici pour plus d'informations.

API Clipboard

Notez que le projet de spécification complet de l'API Clipboard se trouve ici: https://w3c.github.io/clipboard-apis/

Est-il pris en charge?

• document.queryCommandSupported('copy')doit retourner truesi la commande "est prise en charge par le navigateur".
• et document.queryCommandEnabled('copy')revenir truesi le document.execCommand('copy')réussit si appelé maintenant. Vérification pour vous assurer que la commande a été appelée à partir d'un thread initié par l'utilisateur et que d'autres exigences sont remplies.

Cependant , comme un exemple de problèmes de compatibilité du navigateur, Google Chrome de ~ Avril à Octobre 2015 , ne ~ retour truede document.queryCommandSupported('copy')si la commande a été appelé à partir d' un fil lancé par l' utilisateur.

Notez les détails de compatibilité ci-dessous.

Détails de compatibilité du navigateur

Bien qu'un simple appel à document.execCommand('copy')enveloppé dans un bloc try/ catchappelé à la suite d'un clic de l'utilisateur vous obtienne le plus de compatibilité, ce qui suit a certaines conditions:

Tout appel à document.execCommand, document.queryCommandSupportedou document.queryCommandEnableddoit être encapsulé dans un bloc try/ catch.

Différentes implémentations et versions de navigateur lancent différents types d'exceptions lorsqu'elles sont appelées au lieu de revenir false.

Différentes implémentations de navigateur sont toujours en cours et l' API Clipboard est toujours en projet, alors n'oubliez pas de faire vos tests.

La copie automatique dans le presse-papiers peut être dangereuse, donc la plupart des navigateurs (sauf IE) rendent la tâche très difficile. Personnellement, j'utilise l'astuce simple suivante:

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

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

Maintenant, l'opération de copie du presse-papiers est SÉCURITAIRE, car l'utilisateur le fait manuellement (mais d'une manière assez simple). Bien sûr, fonctionne dans tous les navigateurs.

<button id="demo" onclick="copyToClipboard(document.getElementById('demo').innerHTML)">This is what I want to copy</button>

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

L'approche suivante fonctionne dans Chrome, Firefox, Internet Explorer et Edge, et dans les versions récentes de Safari (le support de copie a été ajouté dans la version 10 qui a été publiée en octobre 2016).

• Créez une zone de texte et définissez son contenu sur le texte que vous souhaitez copier dans le presse-papiers.
• Ajoutez la zone de texte au DOM.
• Sélectionnez le texte dans la zone de texte.
• Appelez document.execCommand ("copier")
• Retirez la zone de texte du dom.

Remarque: vous ne verrez pas la zone de texte, car elle est ajoutée et supprimée dans le même appel synchrone de code Javascript.

Certaines choses à surveiller si vous implémentez cela vous-même:

• Pour des raisons de sécurité, cela ne peut être appelé qu'à partir d'un gestionnaire d'événements tel que click (comme avec l'ouverture de fenêtres).
• Internet Explorer affichera une boîte de dialogue d'autorisation la première fois que le presse-papiers est mis à jour.
• Internet Explorer et Edge défileront lorsque la zone de texte sera mise au point.
• execCommand () peut lancer dans certains cas.
• Les sauts de ligne et les tabulations peuvent être avalés, sauf si vous utilisez une zone de texte. (La plupart des articles semblent recommander l'utilisation d'un div)
• La zone de texte sera visible lorsque la boîte de dialogue Internet Explorer est affichée, vous devez soit la masquer, soit utiliser l'API clipboardData spécifique à Internet Explorer.
• Dans Internet Explorer, les administrateurs système peuvent désactiver l'API du presse-papiers.

La fonction ci-dessous doit gérer tous les problèmes suivants aussi proprement que possible. Veuillez laisser un commentaire si vous rencontrez des problèmes ou avez des suggestions pour l'améliorer.

// Copies a string to the clipboard. Must be called from within an
// event handler such as click. May return false if it failed, but
// this is not always possible. Browser support for Chrome 43+,
// Firefox 42+, Safari 10+, Edge and Internet Explorer 10+.
// Internet Explorer: The clipboard feature may be disabled by
// an administrator. By default a prompt is shown the first
// time the clipboard is used (per session).
function copyToClipboard(text) {
    if (window.clipboardData && window.clipboardData.setData) {
        // Internet Explorer-specific code path to prevent textarea being shown while dialog is visible.
        return clipboardData.setData("Text", text);

    }
    else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
        var textarea = document.createElement("textarea");
        textarea.textContent = text;
        textarea.style.position = "fixed";  // Prevent scrolling to bottom of page in Microsoft Edge.
        document.body.appendChild(textarea);
        textarea.select();
        try {
            return document.execCommand("copy");  // Security exception may be thrown by some browsers.
        }
        catch (ex) {
            console.warn("Copy to clipboard failed.", ex);
            return false;
        }
        finally {
            document.body.removeChild(textarea);
        }
    }
}

https://jsfiddle.net/fx6a6n6x/

Voici mon point de vue sur celui-là ...

function copy(text) {
    var input = document.createElement('input');
    input.setAttribute('value', text);
    document.body.appendChild(input);
    input.select();
    var result = document.execCommand('copy');
    document.body.removeChild(input);
    return result;
 }

@korayem: Notez que l'utilisation du inputchamp html ne respectera pas les sauts de ligne \net aplatira tout texte en une seule ligne.

Comme mentionné par @nikksan dans les commentaires, l'utilisation résoudra textareale problème comme suit:

function copy(text) {
    var input = document.createElement('textarea');
    input.innerHTML = text;
    document.body.appendChild(input);
    input.select();
    var result = document.execCommand('copy');
    document.body.removeChild(input);
    return result;
}

Si vous voulez une solution vraiment simple (prend moins de 5 minutes à intégrer) et semble bonne dès la sortie de la boîte, alors Clippy est une belle alternative à certaines des solutions les plus complexes.

Il a été écrit par un co-fondateur de GitHub. Exemple de code d'intégration Flash 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}par le texte à copier et #{bgcolor}par une couleur.

La lecture et la modification du presse-papiers à partir d'une page Web soulèvent des problèmes de sécurité et de confidentialité. Cependant, dans Internet Explorer, il est possible de le faire. J'ai trouvé cet exemple d'extrait :

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

J'ai récemment écrit un blog technique sur ce problème (je travaille chez Lucidchart et nous avons récemment fait une refonte sur notre presse-papiers).

La copie de texte brut dans le presse-papiers est relativement simple, en supposant que vous vouliez le faire pendant un événement de copie système (l'utilisateur appuie CtrlCou utilise le menu du navigateur).

var isIe = (navigator.userAgent.toLowerCase().indexOf("msie") != -1 
           || navigator.userAgent.toLowerCase().indexOf("trident") != -1);

document.addEventListener('copy', function(e) {
    var textToPutOnClipboard = "This is some text";
    if (isIe) {
        window.clipboardData.setData('Text', textToPutOnClipboard);    
    } else {
        e.clipboardData.setData('text/plain', textToPutOnClipboard);
    }
    e.preventDefault();
});

Il est beaucoup plus difficile de placer du texte dans le presse-papiers pendant un événement de copie système. Il semble que certaines de ces autres réponses fassent référence à des façons de le faire via Flash, qui est la seule façon multi-navigateur de le faire (pour autant que je comprends).

En dehors de cela, il existe certaines options navigateur par navigateur.

C'est le plus simple dans IE, où vous pouvez accéder à tout moment à l'objet clipboardData à partir de JavaScript via:

window.clipboardData

(Toutefois, lorsque vous tentez d'effectuer cette opération en dehors d'un événement de coupure, de copie ou de collage système, IE invite l'utilisateur à accorder l'autorisation au presse-papiers de l'application Web.)

Dans Chrome, vous pouvez créer une extension Chrome qui vous donnera des autorisations de presse-papiers (c'est ce que nous faisons pour Lucidchart). Ensuite, pour les utilisateurs avec votre extension installée, vous aurez juste besoin de déclencher l'événement système vous-même:

document.execCommand('copy');

Il semble que Firefox dispose de certaines options qui permettent aux utilisateurs d'accorder des autorisations à certains sites pour accéder au presse-papiers, mais je n'ai essayé aucune de ces options personnellement.

clipboard.js est un petit utilitaire non Flash 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 .

Remarque: cela est désormais obsolète. Migrez ici .

ZeroClipboard est la meilleure solution multi-navigateur que j'ai trouvée:

<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 d'une prise en charge non flash pour iOS, il vous suffit d'ajouter une solution de secours:

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

En 2018, voici comment vous y prendre:

async copySomething(text?) {
  try {
    const toCopy = text || location.href;
    await navigator.clipboard.writeText(toCopy);
    console.log('Text or Page URL copied');
  }
  catch (err) {
    console.error('Failed to copy: ', err);
  }
}

Il est utilisé dans mon code Angular 6+ comme ceci:

<button mat-menu-item (click)="copySomething()">
    <span>Copy link</span>
</button>

Si je passe une chaîne, il la copie. Si rien, il copie l'URL de la page.

On peut aussi faire plus de gymnastique dans le presse-papiers. Voir plus d'informations ici:

Débloquer l'accès au presse-papiers

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

Il est plus facile à utiliser que le plugin natif Zero Clipboard si vous êtes un gros utilisateur de jQuery.

Depuis Chrome 42+ et Firefox 41+ prennent désormais en charge la commande document.execCommand ('copy') . J'ai donc créé deux fonctions pour une capacité copie à presse - papiers multi-navigateur utilisant une combinaison de vieille réponse de Tim vers le bas et la réponse de Google Developer :

function selectElementContents(el) {
    // Copy textarea, pre, div, etc.
    if (document.body.createTextRange) {
        // IE
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.select();
        textRange.execCommand("Copy");
    } 
    else if (window.getSelection && document.createRange) {
        // Non-Internet Explorer
        var range = document.createRange();
        range.selectNodeContents(el);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
        try {
            var successful = document.execCommand('copy');
            var msg = successful ? 'successful' : 'unsuccessful';
            console.log('Copy command was ' + msg);
        }
        catch (err) {
            console.log('Oops, unable to copy');
        }
    }
} // end function selectElementContents(el)

function make_copy_button(el) {
    var copy_btn = document.createElement('input');
    copy_btn.type = "button";
    el.parentNode.insertBefore(copy_btn, el.nextSibling);
    copy_btn.onclick = function() {
        selectElementContents(el);
    };

    if (document.queryCommandSupported("copy") || parseInt(navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)[2]) >= 42) {
        // Copy works with Internet Explorer 4+, Chrome 42+, Firefox 41+, Opera 29+
        copy_btn.value = "Copy to Clipboard";
    }
    else {
        // Select only for Safari and older Chrome, Firefox and Opera
        copy_btn.value = "Select All (then press Ctrl + C to Copy)";
    }
}
/* Note: document.queryCommandSupported("copy") should return "true" on browsers that support copy
    but there was a bug in Chrome versions 42 to 47 that makes it return "false".  So in those
    versions of Chrome feature detection does not work!
    See https://code.google.com/p/chromium/issues/detail?id=476508
*/

make_copy_button(document.getElementById("markup"));

<pre id="markup">
  Text that can be copied or selected with cross browser support.
</pre>

J'utilise cela avec beaucoup de succès ( sans jQuery ou tout autre framework).

function copyToClp(txt){
    txt = document.createTextNode(txt);
    var m = document;
    var w = window;
    var b = m.body;
    b.appendChild(txt);
    if (b.createTextRange) {
        var d = b.createTextRange();
        d.moveToElementText(txt);
        d.select();
        m.execCommand('copy');
    } 
    else {
        var d = m.createRange();
        var g = w.getSelection;
        d.selectNodeContents(txt);
        g().removeAllRanges();
        g().addRange(d);
        m.execCommand('copy');
        g().removeAllRanges();
    }
    txt.remove();
}

Attention

Les tabulations sont converties en espaces (au moins dans Chrome).

J'ai trouvé la solution suivante:

Le gestionnaire de touches enfoncées crée une balise "pre". Nous définissons le contenu à copier dans cette balise, puis faisons une sélection sur cette balise et retournons true dans le gestionnaire. Cela appelle un gestionnaire standard de chrome et copie le texte sélectionné.

Et si vous en avez besoin, vous pouvez définir le délai d'expiration pour la fonction de restauration de la sélection précédente. Mon implémentation sur Mootools:

   function EnybyClipboard() {
     this.saveSelection = false;
     this.callback = false;
     this.pastedText = false;

     this.restoreSelection = function() {
       if (this.saveSelection) {
         window.getSelection().removeAllRanges();
         for (var i = 0; i < this.saveSelection.length; i++) {
           window.getSelection().addRange(this.saveSelection[i]);
         }
         this.saveSelection = false;
       }
     };

     this.copyText = function(text) {
       var div = $('special_copy');
       if (!div) {
         div = new Element('pre', {
           'id': 'special_copy',
           'style': 'opacity: 0;position: absolute;top: -10000px;right: 0;'
         });
         div.injectInside(document.body);
       }
       div.set('text', text);
       if (document.createRange) {
         var rng = document.createRange();
         rng.selectNodeContents(div);
         this.saveSelection = [];
         var selection = window.getSelection();
         for (var i = 0; i < selection.rangeCount; i++) {
           this.saveSelection[i] = selection.getRangeAt(i);
         }
         window.getSelection().removeAllRanges();
         window.getSelection().addRange(rng);
         setTimeout(this.restoreSelection.bind(this), 100);
       } else return alert('Copy not work. :(');
     };

     this.getPastedText = function() {
       if (!this.pastedText) alert('Nothing to paste. :(');
       return this.pastedText;
     };

     this.pasteText = function(callback) {
       var div = $('special_paste');
       if (!div) {
         div = new Element('textarea', {
           'id': 'special_paste',
           'style': 'opacity: 0;position: absolute;top: -10000px;right: 0;'
         });
         div.injectInside(document.body);
         div.addEvent('keyup', function() {
           if (this.callback) {
             this.pastedText = $('special_paste').get('value');
             this.callback.call(null, this.pastedText);
             this.callback = false;
             this.pastedText = false;
             setTimeout(this.restoreSelection.bind(this), 100);
           }
         }.bind(this));
       }
       div.set('value', '');
       if (document.createRange) {
         var rng = document.createRange();
         rng.selectNodeContents(div);
         this.saveSelection = [];
         var selection = window.getSelection();
         for (var i = 0; i < selection.rangeCount; i++) {
           this.saveSelection[i] = selection.getRangeAt(i);
         }
         window.getSelection().removeAllRanges();
         window.getSelection().addRange(rng);
         div.focus();
         this.callback = callback;
       } else return alert('Fail to paste. :(');
     };
   }

Usage:

enyby_clip = new EnybyClipboard(); //init 

enyby_clip.copyText('some_text'); // place this in CTRL+C handler and return true;

enyby_clip.pasteText(function callback(pasted_text) {
        alert(pasted_text);
}); // place this in CTRL+V handler and return true;

Sur coller, il crée une zone de texte et fonctionne de la même manière.

PS peut être cette solution peut être utilisée pour créer une solution entièrement multi-navigateur sans flash. Ses œuvres en FF et Chrome.

Les autres méthodes copient du texte brut dans le presse-papiers. Pour copier HTML (c'est-à-dire que vous pouvez coller les résultats dans un éditeur WSIWYG), vous pouvez effectuer les opérations suivantes dans IE UNIQUEMENT . Ceci est fondamentalement différent des autres méthodes, car le navigateur sélectionne en fait visiblement le contenu.

// create an editable DIV and append the HTML content you want copied
var editableDiv = document.createElement("div");
with (editableDiv) {
    contentEditable = true;
}     
editableDiv.appendChild(someContentElement);          

// select the editable content and copy it to the clipboard
var r = document.body.createTextRange();
r.moveToElementText(editableDiv);
r.select();  
r.execCommand("Copy");

// deselect, so the browser doesn't leave the element visibly selected
r.moveToElementText(someHiddenDiv);
r.select();   

J'ai rassemblé ce que je pense être le meilleur.

• Utilise cssText pour éviter les exceptions dans Internet Explorer par opposition au style directement.
• Restaure la sélection s'il y en avait une
• Définit en lecture seule pour que le clavier ne s'affiche pas sur les appareils mobiles
• Contient une solution de contournement pour iOS afin qu'il fonctionne réellement car il bloque normalement execCommand.

C'est ici:

const copyToClipboard = (function initClipboardText() {
  const textarea = document.createElement('textarea');

  // Move it off screen.
  textarea.style.cssText = 'position: absolute; left: -99999em';

  // Set to readonly to prevent mobile devices opening a keyboard when
  // text is .select()'ed.
  textarea.setAttribute('readonly', true);

  document.body.appendChild(textarea);

  return function setClipboardText(text) {
    textarea.value = text;

    // Check if there is any content selected previously.
    const selected = document.getSelection().rangeCount > 0 ?
      document.getSelection().getRangeAt(0) : false;

    // iOS Safari blocks programmtic execCommand copying normally, without this hack.
    // /programming/34045777/copy-to-clipboard-using-javascript-in-ios
    if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
      const editable = textarea.contentEditable;
      textarea.contentEditable = true;
      const range = document.createRange();
      range.selectNodeContents(textarea);
      const sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range);
      textarea.setSelectionRange(0, 999999);
      textarea.contentEditable = editable;
    }
    else {
      textarea.select();
    }

    try {
      const result = document.execCommand('copy');

      // Restore previous selection.
      if (selected) {
        document.getSelection().removeAllRanges();
        document.getSelection().addRange(selected);
      }

      return result;
    }
    catch (err) {
      console.error(err);
      return false;
    }
  };
})();

Usage: copyToClipboard('some text')

Depuis Flash 10, vous ne pouvez copier dans le presse-papiers que si l'action provient d'une interaction de l'utilisateur avec un objet Flash. ( Lire la section connexe de l'annonce d'Adobe Flash 10 )

La solution est de surcharger un objet flash au-dessus du bouton Copier, ou tout élément qui lance la copie. Zero Clipboard est actuellement la meilleure bibliothèque avec cette implémentation. Les développeurs Flash expérimentés peuvent simplement vouloir créer leur propre bibliothèque.

J'ai trouvé la solution suivante:

J'ai le texte dans une entrée cachée. Étant donné que setSelectionRangecela ne fonctionne pas sur les entrées masquées, j'ai temporairement changé le type en texte, copié le texte, puis rendu à nouveau masqué. Si vous souhaitez copier le texte d'un élément, vous pouvez le passer à la fonction et enregistrer son contenu dans la variable cible.

jQuery('#copy').on('click', function () {
    copyToClipboard();
});

function copyToClipboard() {
    var target = jQuery('#hidden_text');

    // Make it visible, so can be focused
    target.attr('type', 'text');
    target.focus();
    // Select all the text
    target[0].setSelectionRange(0, target.val().length);

    // Copy the selection
    var succeed;
    try {
        succeed = document.execCommand("copy");
    }
    catch (e) {
        succeed = false;
    }

    // Hide input again
    target.attr('type', 'hidden');

    return succeed;
}

Copiez le texte de l'entrée HTML dans le presse-papiers:

 function myFunction() {
   /* Get the text field */
   var copyText = document.getElementById("myInput");

   /* Select the text field */
   copyText.select();

   /* Copy the text inside the text field */
   document.execCommand("Copy");

   /* Alert the copied text */
   alert("Copied the text: " + copyText.value);
 }

 <!-- The text field -->
 <input type="text" value="Hello Friend" id="myInput">

 <!-- The button used to copy the text -->
<button onclick="myFunction()">Copy text</button>

Remarque: La document.execCommand()méthode n'est pas prise en charge dans Internet Explorer 9 et versions antérieures.

Source : W3Schools - Copier du texte dans le presse-papiers

Il existe déjà de nombreuses réponses, mais vous souhaitez en ajouter une (jQuery). Fonctionne très bien sur n'importe quel navigateur, également mobile (c'est-à-dire, les invites sur la sécurité, mais lorsque vous l'acceptez, cela fonctionne très bien).

function appCopyToClipBoard(sText)
{
    var oText = false,
        bResult = false;
    try
    {
        oText = document.createElement("textarea");
        $(oText).addClass('clipboardCopier').val(sText).insertAfter('body').focus();
        oText.select();
        document.execCommand("Copy");
        bResult = true;
    }
    catch(e) {
    }

    $(oText).remove();
    return bResult;
}

Dans votre code:

if (!appCopyToClipBoard('Hai there! This is copied to the clipboard.'))
{
    alert('Sorry, copy to clipboard failed.');
}

C'est un peu une combinaison entre les autres réponses.

var copyToClipboard = function(textToCopy){
    $("body")
        .append($('<textarea name="fname" class="textToCopyInput"/>' )
        .val(textToCopy))
        .find(".textToCopyInput")
        .select();
      try {
        var successful = document.execCommand('copy');
        var msg = successful ? 'successful' : 'unsuccessful';
        alert('Text copied to clipboard!');
      } catch (err) {
          window.prompt("To copy the text to clipboard: Ctrl+C, Enter", textToCopy);
      }
     $(".textToCopyInput").remove();
}

Il utilise jQuery, mais ce n'est pas obligatoire bien sûr. Vous pouvez changer cela si vous le souhaitez. Je viens d'avoir jQuery à ma disposition. Vous pouvez également ajouter du CSS pour vous assurer que l'entrée ne s'affiche pas. Par exemple quelque chose comme:

.textToCopyInput{opacity: 0; position: absolute;}

Ou bien sûr, vous pouvez également faire un style en ligne

.append($('<textarea name="fname" style="opacity: 0;  position: absolute;" class="textToCopyInput"/>' )

Dans les navigateurs autres que IE, vous devez utiliser un petit objet flash pour manipuler le presse-papiers, par exemple

• Copie automatique dans le presse-papiers

J'ai eu le même problème pour créer une modification de grille personnalisée à partir (quelque chose comme Excel) et la compatibilité avec Excel. Je devais prendre en charge la sélection de plusieurs cellules, la copie et le collage.

Solution: créez une zone de texte dans laquelle vous allez insérer des données à copier par l'utilisateur (pour moi lorsque l'utilisateur sélectionne des cellules), placez-y le focus (par exemple, lorsque l'utilisateur appuie sur Ctrl) et sélectionnez tout le texte.

Ainsi, lorsque l'utilisateur appuie sur Ctrl+ Cil obtient des cellules copiées qu'il / elle sélectionne. Après avoir testé, il suffit de redimensionner la zone de texte à un pixel (je n'ai pas testé si cela fonctionnera à l'écran: aucun). Cela fonctionne bien sur tous les navigateurs et il est transparent pour l'utilisateur.

Coller - vous pouvez faire la même chose comme cela (diffère selon votre cible) - garder le focus sur les zones de texte et attraper les événements de collage en utilisant onpaste (dans mon projet, j'utilise des zones de texte dans les cellules pour les modifier).

Je ne peux pas coller d'exemple (projet commercial), mais vous avez l'idée.

J'ai utilisé clipboard.js.

Nous pouvons l'obtenir sur npm:

npm install clipboard --save

Et aussi sur Bower

bower install clipboard --save

L'utilisation et les exemples se trouvent sur https://zenorocha.github.io/clipboard.js/ .

Il s'agit d'une extension de la réponse de @ Chase, avec l'avantage qu'elle fonctionnera pour les éléments IMAGE et TABLE, pas seulement pour les DIV sur IE9.

if (document.createRange) {
    // IE9 and modern browsers
    var r = document.createRange();
    r.setStartBefore(to_copy);
    r.setEndAfter(to_copy);
    r.selectNode(to_copy);
    var sel = window.getSelection();
    sel.addRange(r);
    document.execCommand('Copy');  // does nothing on FF
} else {
    // IE 8 and earlier.  This stuff won't work on IE9.
    // (unless forced into a backward compatibility mode,
    // or selecting plain divs, not img or table). 
    var r = document.body.createTextRange();
    r.moveToElementText(to_copy);
    r.select()
    r.execCommand('Copy');
}

Il semble que j'ai mal lu la question, mais pour référence, vous pouvez extraire une plage du DOM (pas dans le presse-papiers; compatible avec tous les navigateurs modernes), et le combiner avec les événements oncopy et onpaste et onbeforepaste pour obtenir le comportement du presse-papiers. Voici le code pour y parvenir:

function clipBoard(sCommand) {
  var oRange=contentDocument.createRange();
  oRange.setStart(startNode, startOffset);
  oRange.setEnd(endNode, endOffset);
/* This is where the actual selection happens.
in the above, startNode and endNode are dom nodes defining the beginning 
and end of the "selection" respectively. startOffset and endOffset are 
constants that are defined as follows:

END_TO_END: 2
END_TO_START: 3
NODE_AFTER: 1
NODE_BEFORE: 0
NODE_BEFORE_AND_AFTER: 2
NODE_INSIDE: 3
START_TO_END: 1
START_TO_START: 0

and would be used like oRange.START_TO_END */
      switch(sCommand) {
    case "cut":
          this.oFragment=oRange.extractContents();
      oRange.collapse();
      break;
    case "copy":
      this.oFragment=oRange.cloneContents();
      break;
    case "paste":
      oRange.deleteContents();
      var cloneFragment=this.oFragment.cloneNode(true)
      oRange.insertNode(cloneFragment);
      oRange.collapse();
      break;
  }
}

Ma faute. Cela ne fonctionne que dans IE.

Voici encore une autre façon de copier du texte:

<p>
    <a onclick="window.clipboardData.setData('text', document.getElementById('Test').innerText);">Copy</a>
</p>

C'est la seule chose que j'ai jamais mise au travail, après avoir recherché diverses manières sur Internet. C'est un sujet compliqué. Il existe de nombreuses solutions publiées dans le monde et la plupart d'entre elles ne fonctionnent pas . Cela a fonctionné pour moi:

REMARQUE: ce code ne fonctionnera que lorsqu'il sera exécuté en tant que code synchrone direct vers quelque chose comme une méthode «onClick». Si vous appelez une réponse asynchrone à Ajax ou de toute autre manière asynchrone, cela ne fonctionnera pas.

copyToClipboard(text) {
    var copyText = document.createElement("input");
    copyText.type = "text";
    document.body.appendChild(copyText);
    copyText.style = "display: inline; width: 1px;";
    copyText.value = text;
    copyText.focus();
    document.execCommand("SelectAll");
    document.execCommand("Copy");
    copyText.remove();
}

Je me rends compte que ce code affichera un composant de 1 pixel de large visiblement à l'écran pendant une milliseconde, mais j'ai décidé de ne pas vous en soucier, ce que d'autres peuvent résoudre en cas de problème réel.

Pour copier un texte sélectionné («Texte à copier») dans votre presse-papiers, créez un Bookmarklet (signet du navigateur qui exécute JavaScript) et exécutez-le (cliquez dessus). Cela créera une zone de texte temporaire.

Code de GitHub:

https://gist.github.com/stefanmaric/2abf96c740191cda3bc7a8b0fc905a7d

(function (text) {
  var node = document.createElement('textarea');
  var selection = document.getSelection();

  node.textContent = text;
  document.body.appendChild(node);

  selection.removeAllRanges();
  node.select();
  document.execCommand('copy');

  selection.removeAllRanges();
  document.body.removeChild(node);
})('Text To Copy');