Copier le texte dans le presse-papiers en JavaScript

Bonjour,

Quelle est la meilleure méthode pour copier du texte dans le presse-papiers en JavaScript?

L’approche suivante fonctionne dans Chrome, Firefox, Internet Explorer et Edge, ainsi que dans les versions récentes de Safari.

  1. Créez une zone de texte et définissez son contenu avec le texte que vous souhaitez copier dans le presse-papiers.
  2. Ajoutez un textarea au DOM.
  3. Sélectionnez le texte dans le textarea.
  4. Appelez document.execCommand("copy")
  5. Retirez le textarea du DOM.

Remarque : vous ne verrez pas le textarea, car elle est ajoutée et supprimée lors de la même invocation synchrone du code Javascript.

Code HTML:

<button id="copy" data-presse-papiers="Welcome to WayToLearnX!">Copy</button>

Code JavaScript:

function copyToPressePapiers(text) 
{
    if (window.clipboardData && window.clipboardData.setData) 
    {
        // Empêcher l'affichage du textarea 
        return clipboardData.setData("Text", text); 

    } else if (document.queryCommandSupported && 
                  document.queryCommandSupported("copy"))
     {
        var textarea = document.createElement("textarea");
        textarea.textContent = text;
        textarea.style.position = "fixed";
        document.body.appendChild(textarea);
        textarea.select();
        try {
            return document.execCommand("copy");
        } 
        catch (e) {
            console.warn("La copie dans le presse-papiers a échoué.", e);
            return false;
        } 
        finally {
            document.body.removeChild(textarea);
        }
    }
}

document.querySelector("#copy").onclick = function() 
{
    var copy = document.getElementById('copy');
    var txt = copy.getAttribute('data-presse-papiers');
    var result = copyToPressePapiers(txt);
};

Vous pouvez voir le résultat du code ci-dessus en cliquant sur « Run Pen »

Voici un simple exemple, il suffit de tapez un texte puis sélectionner-le, et il sera automatiquement copié dans le presse-papiers, en laissant le reste à l’utilisateur.

<input onclick="this.select(); document.execCommand('copy');" type='text' value='Sélectionner ce texte' />