Snippet #27 ~ Javascript : copier dans le presse papier sans flash (et fonctionne sur ie)

Si vous avez déjà tenté de copier une valeur dans le press papier depuis le code de votre site web, vous avez vite du constater qu’il vous est nécessaire de passer
par un flash dégueulasse pour être compatible cross browser ou de vous cantonner à IE clipboard.

Fort heureusement les nouvelles API HTML 5 permettent de passer outre le flash (ou le clipboard API qui fonctionnouille de manière pas folichonne selon le navigateur) à l’aide de la
fonction execCommand(‘copy’).

Seuls inconvénients de cette commande :

  • Il semble nécessaire que la copy parte d’un événement utilisateur, cela implique qu’il faut forcement un click sur un élément vous ne pouvez pas lancer la copie direct
  • La technique est un peu tricky ça ne se fait pas en une commande
  • Sous IE, il semble que le site ouvre de temps a autre un prompt demandant l’autorisation à l’utilisateur de copier (il est quand même possible de cliquer sur oui pour récuperer la valeur dans le presse papier mais ça ajoute bêtement un click)

Je vous ai bricolé une petite fonction jquery pour simplifier le point 2 :

L’utilisation est la suivante :
$(‘#monBouton’).copy(“IdleBlog is op!!”);

L’installation se fait en ajoutant la clause suivante dans votre javascript (nécessite Jquery)

$.fn.extend({    
    copy : function (text) {
        return $(this).click(function () {
            var container = $('<span style="position:absolute;top:-1000px;"></span>').text(text);
            $('body').append(container);
            var range = document.createRange();
            var selection = window.getSelection();
            selection.removeAllRanges();
            range.selectNodeContents(container.get(0));
            selection.addRange(range);
            document.execCommand('copy');
            selection.removeAllRanges();
            container.remove();
        });
    }
});

Bien entendu vous pouvez utiliser execCommand sans encapsuler ça dans du jquery même si personnellement je pense que si vous n’utilisez pas du jquery vous ne méritez pas de vivre allez vous prendre un peu plus la tête pour rien.

Bien à vous.

9 réactions au sujet de « Snippet #27 ~ Javascript : copier dans le presse papier sans flash (et fonctionne sur ie) »

  1. Symen Réponse

    Effectivement, c’est un peu tricky. 🙂
    Merci du coup, je vais noter ça à quelque part.

    Petite remarque par contre, ça me semble potentiellement dangereux de concaténer text avec du html comme ça, il ne vaudrait pas mieux créer l’élément vide d’abord, puis faire un container.text(text) ensuite ?

  2. Cym13 Réponse

    > Ça ajoute un click bêtement

    Étant donné que la première idée qui m’est venue en voyant cela c’est “comment est-ce que je pourrais l’utiliser pour copier du code malveillant dans le presse-papier de l’utilisateur à son insu et le coller ailleurs pour outrepasser les sécurités du navigateur” je trouve au contraire que c’est une bonne chose du point de vu sécurité de demander la permission ^^

    • Idleman Auteur ArticleRéponse

      On retombe facilement dans le début accessibilité vs sécurité, pour avoir un navigateur parfaitement sécurisé il suffirait de désactiver javascript… 🙂

  3. AW Réponse

    Hello,

    La version sans JQuery n’est pas si prise de tête que ça, c’est exactement la même chose sauf qu’elle est plus courte en nombre de lignes et ne nécessite pas de charger des tas de lignes de code de JQuery.

    :siffle:

    • Idleman Auteur ArticleRéponse

      La version sans jquery ne prends pas en compte la création de la balise (qu’il faut faire manuellement dans le dom coté html) d’ou ses quelques lignes de moins et la version avec jquery prend en compte une encapsulation dans la lib jquery ce qui lui rajoute des lignes.

      A fonctionnalités similaire jquery est plus court (pas de beaucoup je le concède), pour ce qui est de charger ou non la lib de jquery, c’est une question de mutualisation du code, il est sûr que si tu as ce seul code js dans ton site il ne sert pas d’utiliser jquery, pour tous les autres cas c’est une autre histoire.

  4. tranche Réponse

    A noter : il y a ça comme solution https://clipboardjs.com/ , ça s’utilise pas exactement pareil mais derrière ça utilise execCommand tout pareil.

    Sinon quand je lis : “si vous n’utilisez pas du jQuery vous ne méritez pas de vivre allez vous prendre un peu plus la tête pour rien” … hm c’était vrai il y a 5ans et c’est peut être vrai si on doit encore supporter du IE < 11 mais sinon c'est plutôt l'inverse. Et franchement dans le cas présent jQuery (une lib énorme de plus de 287Ko en v1.12), juste pour quelque ligne de code : je penses qu'il n'est pas judicieux de faire dépendre ces quelque ligne d'un millier d'autre ligne de jQuery.
    Et c'est vrai pour tout : à chaque solution jQuery un dev devrait la comparer à une solution vanilla et ne surtout pas se dire qu'il serait bête de ne pas utiliser jQuery

    • Idleman Auteur ArticleRéponse

      Je pense que c’est une question d’utilisation et de contexte, personnellement je gère au travail des projets contenant plusieurs dizaines de millier de lignes de code, jquery me permet de mutualiser des centaines de section javascript différentes sur le projet ce qui au final apporte à la fois une économie de javascript et un gain de compréhension, sans jquery il serait nécessaire d’ajouter plusieurs pages de Js natif pour arriver au même résultats.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.