Autoblog du blog d'Idleman

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.