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.
Y’a encore des gens qui utilisent jquery en 2016 ?
Allez, pour les neuneus du fond : http://youmightnotneedjquery.com/
Ca te fera un code qui marchera encore dans 5 ans !
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 ?
Oui c’est une excellente remarque, ça m’apprendra a faire le fainéant 🙂
> Ç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 ^^
On retombe facilement dans le début accessibilité vs sécurité, pour avoir un navigateur parfaitement sécurisé il suffirait de désactiver javascript… 🙂
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:
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.
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
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.