web-dev-qa-db-fra.com

Alternative HTML5 au ZeroClipboard basé sur flash pour une copie sécurisée des données dans le presse-papiers?

Avec la sortie du flash dans de nombreux environnements (iPhone, Android, IE10, etc ...), y a-t-il une nouvelle solution à venir dans les navigateurs qui permettra une copie sûre des informations dans le presse-papiers sans flash installé?

J'ai utilisé ZeroClipboard jusqu'à présent, mais je m'inquiète pour plus de téléspectateurs qui n'ont pas de flash et cette fonctionnalité va être interrompue et j'aimerais ne pas dépendre de Flash autant que possible .

html5clipboardzeroclipboard
64
jfriend00

Le raisonnement est que la copie automatique dans le presse-papiers peut être très dangereuse, donc la plupart des navigateurs (sauf IE) * rendent la tâche difficile à moins d'utiliser le flash.

Tout comme votre ZeroClipboard , il y a Clipboard LMCButton qui utilise également un petit script flash exécuté en arrière-plan.

Une solution commune serait de faire ceci:

 function copyToClipboard (text) {
     window.Prompt ("Copy to clipboard: Ctrl+C, Enter", text);
 }

Ce que j'ai trouvé de Jarek Milewski quand quelqu'un d'autre a posé la question ici

* Oui, j'ai trouvé une solution pour IE, mais ne fonctionne pas dans la plupart des navigateurs modernes, cochez ici .

21
Beau Bouchard

Je sais que cette réponse arrive un peu tard, mais il existe maintenant une nouvelle alternative moderne à ZeroClipboard (qui est basée sur Flash). Clipboard.js est une alternative 2 Ko pure JavaScript qui n'a aucune dépendance .

19
Baraa

J'ai créé une solution JavaScript pure appelée clip-j. Ici c'est. Fondamentalement, il tire parti de document.execCommand('copy'); avec quelques autres commandes qui font que vous ne voyez rien. Voici le code:

function clip(text) {   
    var copyElement = document.createElement('input');      
    copyElement.setAttribute('type', 'text');   
    copyElement.setAttribute('value', text);    
    copyElement = document.body.appendChild(copyElement);   
    copyElement.select();   
    document.execCommand('copy');   
    copyElement.remove();
}
6
Triforcey

Vous pouvez consulter cet article de blog pour une discussion approfondie sur la façon de travailler avec le presse-papiers en HTML5. Malheureusement, vous ne pouvez toujours pas copier de manière portable dans le presse-papiers en un clic. Cependant, pour chrome et firefox, vous pouvez créer une extension de navigateur qui peut donner à votre site l'autorisation d'accéder au presse-papiers, et je crois que IE vous permettra de copier vers le presse-papiers, mais invitera l'utilisateur à accorder l'autorisation.

Mise à jour :

Selon ceci: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand Firefox 41+, Chrome 42+ , et IE 9+ prend en charge la commande copy avec execCommand. Pour firefox et chrome cela ne fonctionnera que s'il est déclenché par une action de l'utilisateur telle qu'un clic, et pour IE cela donnera à l'utilisateur une boîte de dialogue d'avertissement lui demandant l'autorisation de copier dans le presse-papiers.

3
Thayne

Pour utiliser l'execCommand, vous devez d'abord sélectionner () quelque chose sur la page, afin de ne pas simplement copier ce qui a été mis en dernier dans le presse-papiers. Avec cette fonction, je passe l'id de la zone de texte d'entrée dans la fonction et la sélectionne (), puis j'exécute la commande de copie. Pas besoin d'ajouter des écouteurs ou de compliquer davantage votre code. Le document.execCommand () renvoie false s'il n'est pas activé ou pris en charge, vous pouvez donc utiliser window.Prompt comme méthode de sauvegarde.

function copyToClipboard(id) {
    var blnCopied;
    document.getElementById(id).select();
    blnCopied = document.execCommand("copy", false, null);
    if (blnCopied)
        alert('Link copied to clipboard');
    else
        window.Prompt ("Copy to clipboard: Ctrl+C, Enter", jQuery("#"+id).val());
}

Utilisez une balise d'ancrage "a" standard avec un onclick = "copyToClipboard ('some_id')"

0
Geektracker

Il y a d'excellentes réponses à cette question , et j'ai choisi d'utiliser cet extrait:

function copyToClipboard(element) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val($(element).text()).select();
    document.execCommand("copy");
    $temp.remove();
}

Cependant, s'il y a bootstrap-select sur votre page, la ligne $temp.val($(element).text()).select() générera une erreur:

Le widget ne peut fonctionner que sur certains éléments

Vous pouvez utiliser .trigger('select') à la place, comme indiqué dans la documentation jQuery pour .select () , comme ceci:

$temp.val($(element).val()).trigger('select');
0
Dmytro