2009-12-23 33 views
6

Sé que esta pregunta se me preguntó como un millón de veces por ahora, pero realmente no pude encontrar una buena solución actualizada.Copiar/Pegar en JavaScript?

Implementé mi propio menú para brindar al usuario la posibilidad de cortar, copiar y pegar en mi aplicación web. Pero no estoy seguro de cómo trabajar con el portapapeles en Firefox, IE, Safari/Chrome.

Gracias por su ayuda.

Respuesta

1

hicieron intento de u: http://ericphan.info/development/cross-browser-copy-and-paste-with-jquery-copy/

ACTUALIZACIÓN: el enlace no está disponible, así que copiar el contenido de la caché:

El Escenario

yo estaba trabajando en un proyecto de cliente de SSO cuando el cliente informó un error en la aplicación web.

El error implicó un enlace de correo generado dinámicamente que se actualizó cuando seleccionó varios empleados. El cliente informaba un error cuando seleccionaba más de 10 empleados para enviarlos por correo electrónico. Su Lotus Notes cliente de correo apareció un error que dice:

error argumentos de línea de comandos de procesamiento de

Prueba esto mismo me encontré con que Outlook 2007 podría soportar fácilmente los mensajes de correo electrónico de 30-40 empleados antes del enlace mailto dejado de funcionar. La Causa

Resulta que la especificación de mailto tiene un límite y los clientes de correo también tienen un límite. Lotus Notes solo maneja 240 caracteres en el enlace mailto y otros clientes de correo modernos como Outlook 2007 admiten los 2083 caracteres: la longitud máxima de una URL

Esto explica la discrepancia en las pruebas. La solución - jQuery al rescate

Como se trata de una limitación de la especificación HTML que necesitábamos otra solución para satisfacer las necesidades del cliente de “Quiero ser capaz de seleccionar varios empleados y enviar un correo electrónico a todos ellos”

Podríamos haber creado un formulario de correo electrónico que utilizara SMTP para enviar el correo electrónico, pero el cliente quería utilizar Lotus Notes como su cliente de correo.

Terminamos cambiando el botón "correo electrónico" para copiar todos los correos electrónicos (separados por comas) en el portapapeles y abrimos una nueva ventana de correo electrónico. Todo lo que el cliente tenía que hacer era presionar CTRL + V y pegar los correos electrónicos en el campo TO. Esta fue la solución más rápida y económica que le dio al cliente la flexibilidad de usar su propio cliente de correo electrónico.

Existe un complemento de JQuery llamado jquery.copy que proporciona copia y pegado de navegador cruzado mediante el uso de un archivo flash (swf). Esto es similar a cómo funciona el resaltador de sintaxis en mi blog.

Una vez que el archivo de referencia jquery.copy.js todo lo que necesita hacer para enviar datos en el portapapeles es ejecutar el siguiente:

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

agradable y fácil;)

Nota: es posible necesita cambiar la ruta del archivo SWF en jquery.copy.JS para conseguir que esto funcione

+2

Y, desde esa publicación de blog, zeroclipboard se ve bien - http://code.google.com/p/zeroclipboard/ –

+0

gracias gracias por tu comentario :) –

+0

Parece que cubre la copia en el portapapeles pero realmente necesita la funcionalidad de pegar desde el portapapeles ... – thedp

7

simplemente me escribió una detallada técnica blog post sobre este mismo tema (Trabajo para Lucidchart y recientemente hemos hecho una puesta a punto en nuestro portapapeles). Incluido en la publicación es this fiddle que es un ejemplo de trabajo de copiar y pegar a través de Javascript.

La buena noticia es que este ejemplo proporciona un código de trabajo para configurar/obtener cualquier tipo de datos de portapapeles admitidos siempre que el usuario utilice una tecla de acceso directo al portapapeles.

La mala noticia es que utilizar su propio menú contextual para copiar y pegar es problemático. Incluso Google no puede evitar esto (intente copiar o pegar en el menú de contexto de Google Docs en Firefox). Podrás hacer que funcione sin demasiados problemas en IE. Esto se debe a que se puede acceder al objeto clipboardData en cualquier momento desde Javascript través de:

window.clipboardData 

(Cuando intenta hacer esto fuera de un corte del sistema, copiar o evento paste, sin embargo, IE le pedirá al usuario para conceder el permiso del Portapapeles de aplicaciones web.)

En Chrome, puede crear una extensión de Chrome que le dará a su aplicación web clipboard permissions (esto es lo que hacemos para Lucidchart). A continuación, para los usuarios con su extensión instalada que sólo tendrá que desencadena el evento sistema por sí mismo cuando hacen clic en la opción de menú:

document.execCommand('copy'); 

Parece que Firefox tiene some options que permiten a los usuarios para conceder permisos a ciertos sitios para acceder a la portapapeles, pero no he probado ninguno personalmente.