Copier du texte dans le presse-papier système

Astucejavascript

Publié par le (4736 lectures)

javascript copier execCommand

Copier vers le presse-papier du système d'exploitation une information provenant du document est une tâche que l'on souhaite parfois réaliser pour faciliter la vie de l'utilisateur, lors de l'utilisation d'une application web : une chaîne aléatoire complexe, une URL, une clé, ou tout simplement un message... C'est à la portée de la fonction JavaScript execCommand() qui prend en paramètre l'opération que l'on souhaite réaliser copy (copier), cut (couper), paste (coller).

On retrouve ce principe souvent sur les fonctions de partage de document par lien tel que sur Google Drive :

Google Drive partage par lien

Ceci fait l'objet d'une spécification "non officielle" execCommand pourtant très bien supportée par tous les navigateurs. A terme, on devrait plutôt s'orienter vers ContentEditable et Input Events

Supposons que vous avez structuré le texte à copier de la façon suivante, dans un quelconque élément HTML :

<p>
   Copiez cette adresse : <span id="tocopy">https://www.knacss.com/</span>
</p>

On va y adjoindre un bouton d'action pour lancer la copie, doté d'une classe js-copy pour lui lier un événement JavaScript et un attribut data-target permettant de ne pas coder "en dur" dans la fonction correspondante l'élément cible. Ceci a l'intérêt de pouvoir réutiliser cette même classe js-copy avec de multiples éléments, chacun définissant quelle est sa "source" d'information.

<p>
   Copiez cette adresse : <span id="tocopy">https://www.knacss.com/</span>
   <input type="button" value="Copier" class="js-copy" data-target="#tocopy">
</p>

Sans plus attendre, le script associé, qui va se servir des méthodes createRange et getSelection pour sélectionner une portion de contenu dans le document et ensuite exécuter par-dessus la commande de copie :

var btncopy = document.querySelector('.js-copy');
if(btncopy) {
    btncopy.addEventListener('click', docopy);
}

function docopy() {

    // Cible de l'élément qui doit être copié
    var target = this.dataset.target;
    var fromElement = document.querySelector(target);
    if(!fromElement) return;

    // Sélection des caractères concernés
    var range = document.createRange();
    var selection = window.getSelection();
    range.selectNode(fromElement);
    selection.removeAllRanges();
    selection.addRange(range);

    try {
        // Exécution de la commande de copie
        var result = document.execCommand('copy');
        if (result) {
            // La copie a réussi
            alert('Copié !');
        }
    }
    catch(err) {
        // Une erreur est surevnue lors de la tentative de copie
        alert(err);
    }

    // Fin de l'opération
    selection = window.getSelection();
    if (typeof selection.removeRange === 'function') {
        selection.removeRange(range);
    } else if (typeof selection.removeAllRanges === 'function') {
        selection.removeAllRanges();
    }
}

Démo

See the Pen Copier by Alsacreations (@alsacreations) on CodePen.

Pour savoir si une commande est supportée par le navigateur, on peut interroger la méthode queryCommandSupported en lui passant en paramètre le nom de la commande :

document.queryCommandSupported('copy')

Commentaires

Je trouve que l'article aurait pu être plus poussé. Qu'en est-il de l'API Clipboard ?

Sinon, pourquoi ne pas avoir utilisé la fonction select comme ceci : `document.querySelector(target).select();` qui, pour moi, facilite bien plus la tâche et économise plusieurs lignes de code pour ce qui est de copier le texte. Le code allégé deviendrait ainsi :

```js

const btncopy = document.querySelector('.js-copy');

if (btncopy !== null) {

btncopy.addEventListener('click', docopy);

}

function docopy() {

const fromElement = document.querySelector(this.dataset.target);

if (fromElement === null) {

return false;

}

fromElement.select();

try {

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

if (result) {

alert('Copié !');

}

} catch (err) {

// Une erreur est survenue lors de la tentative de copie

alert(err);

}

}

```

Commenter

Vous devez être inscrit et identifié pour utiliser cette fonction.

Connectez-vous (déjà inscrit)

Oubli de mot de passe ? Pas de panique, on va le retrouver

Pas encore inscrit ? C'est très simple et gratuit.