2009-12-23 7 views
6

Je sais que cette question a été posée comme un million de fois maintenant, mais je ne pouvais pas vraiment trouver une bonne solution mise à jour.Copier/Coller dans JavaScript?

J'ai mis en place mon propre menu pour fournir à l'utilisateur la possibilité de couper, copier et coller dans mon WebApp. Mais je ne sais pas comment travailler avec le presse-papiers sur Firefox, IE, Safari/Chrome.

Nous vous remercions de votre aide.

Répondre

1

a fait u essayer: http://ericphan.info/development/cross-browser-copy-and-paste-with-jquery-copy/

MISE À JOUR: le lien n'est pas disponible donc je copier le contenu du cache:

Le scénario

je travaillais sur un projet client pour SSW quand le client a signalé un bogue dans l'application Web.

Le bug impliquait un lien généré dynamiquement mis à jour mailto qui a obtenu lorsque vous avez sélectionné plusieurs employés. Le client signalait une erreur lorsqu'il a sélectionné plus de 10 employés à envoyer par courrier électronique. Son client Lotus Notes de courrier a surgi une erreur en disant:

arguments Erreur de ligne de commande de traitement

test moi-même je trouve que Outlook 2007 pourrait facilement prendre en charge les e-mails de 30-40 employés avant que le lien mailto ne fonctionne plus. La cause

Il s'avère que la spécification mailto a une limite et les clients de messagerie ont également une limite. Lotus Notes ne gère que 240 caractères dans le lien mailto et d'autres clients de messagerie modernes comme Outlook 2007 prennent en charge les 2083 caractères - la longueur maximale d'une URL

Ceci explique la divergence dans les tests. Le correctif - JQuery à la rescousse

Puisqu'il s'agit d'une limitation de la spécification HTML, nous avions besoin d'une autre solution pour répondre à l'exigence du client: «Je veux pouvoir sélectionner plusieurs employés et leur envoyer un courriel»

Nous aurions pu créer un formulaire électronique qui utilise SMTP pour envoyer l'e-mail - mais le client voulait utiliser Lotus notes comme son client de messagerie.

Nous avons fini par changer le bouton « e-mail » pour copier tous les e-mails (séparés par une virgule) dans le presse papier et s'ouvrit une nouvelle fenêtre e-mail. Tout ce que le client avait à faire était de taper CTRL + V et de coller les emails dans le champ TO. C'était la solution la plus rapide et la plus rentable qui donnait au client la possibilité d'utiliser son propre client de messagerie.

Il y a un plugin JQuery appelé jquery.copy qui a fourni copier et coller croix navigateur en utilisant un fichier flash (swf). Ceci est similaire à la façon dont la syntaxe surligneur sur mon blog fonctionne.

Une fois que vous faites référence à la jquery.copy.js fichier tout ce que vous devez faire pour pousser les données dans le presse-papiers est exécuté comme suit:

$.copy("some text to copy"); 

Nice et facile;)

Note: vous pouvez besoin de changer le chemin le fichier SWF dans jquery.copy.js pour que ça marche

+2

Et, à partir de ce blog, zeroclipboard semble bon - http://code.google.com/p/zeroclipboard/ –

+0

dan merci de votre commentaire :) –

+0

Il ne semble pas couvrir la copie dans le presse-papiers, mais je vraiment besoin de la fonctionnalité de coller à partir du presse-papiers ... – thedp

7

Je viens d'écrire un détail technique blog post sur ce même sujet (je travaille pour Lucidchart et nous avons récemment fait une refonte sur notre presse-papier). Inclus dans le poste est this fiddle qui est un exemple de travail de copier et coller via Javascript. La bonne nouvelle est que cet exemple vous donne le code de travail pour définir/obtenir tous les types de données de presse-papiers supportés chaque fois que l'utilisateur utilise un raccourci clavier. La mauvaise nouvelle est que l'utilisation de votre propre menu contextuel pour copier et coller est problématique. Même Google ne peut pas contourner cela (essayez d'utiliser copie de menu contextuel ou coller dans Google Docs dans Firefox). Vous serez en mesure de le faire fonctionner sans trop de problèmes dans IE. En effet, vous pouvez accéder à l'objet clipboardData à tout moment à partir de JavaScript via:

window.clipboardData 

(Lorsque vous essayez de le faire en dehors d'une coupure du système, copier ou événement paste, cependant, IE demandera à l'utilisateur d'accorder Dans l'application Chrome, vous pouvez créer une extension de chrome qui donnera à votre application Web clipboard permissions (c'est ce que nous faisons pour Lucidchart). Ensuite, pour les utilisateurs avec votre extension installée, vous aurez juste besoin de tirer l'événement système vous-même lorsqu'ils cliquent sur l'option de menu:

document.execCommand('copy'); 

Il semble que Firefox a some options qui permettent aux utilisateurs d'accorder des autorisations à certains sites pour accéder à la presse-papiers, mais je n'ai pas essayé personnellement.