PROJET AUTOBLOG


IdleBlog

Site original : IdleBlog

⇐ retour index

Mise à jour

Mise à jour de la base de données, veuillez patienter...

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

mercredi 19 octobre 2016 à 01:08

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 :

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.