[SOLUCIONADO] Copiar texto al portapapeles al hacer clic en una imagen.

[VityOsma]

Pues lo dicho, necesito copia una pequeña linea de texto al porta papeles cuando hagan clic en una imagen, por ejemplo, si es con una función de Javascript, algo como:

onClick="copyToClipboard('hola')"

Cada imagen llevara un texto diferente generado con un script PHP, así que escribiré el texto directamente en el evento onClick.

Alguien tiene alguna idea de como podría hacerlo, me da igual que lenguaje de programación usar (jQuery, PHP, Javascript etc...) y si es necesario usar flash (que algo he visto por ahí con flash) se usa, lo suyo sería que funcionase en todos los navegadores, y de momento no va en ninguno, así cualquier ayuda me vendrá bien. Gracias! Si alguien piensa que no se puede o lo ha intentado y se ha dado por vencido que lo comente también.

[stramin]

Esta pregunta es de javascript y solo puede hacerse con javascript (y con el permiso del cliente)

PHP opera en el servidor, por lo que no puede controlar el equipo del cliente.

Código Javascript:

function copyToClipboard(text)
{
    if (window.clipboardData) // Internet Explorer
    {  
        window.clipboardData.setData("Text", text);
    }
    else
    {  
        unsafeWindow.netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");  
        const clipboardHelper = Components.classes["@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);  
        clipboardHelper.copyString(text);
    }
}
 

Esa podría ser la función en javascript, pero recuerda, todos los navegadores vienen con el acceso al portapapeles bloqueado por seguridad y debe activarse manualmente, en firefox es algo complicado, en internet explorer es todo un desafío...

El problema de esto es que tendrás que decirle a todos tus clientes que lo habiliten.

una opcion alternativa es hacer algo asi:

Código Javascript:

function copyToClipboard(text)
{
    window.prompt("Copia este texto:", text);
    }
}
 

[DrFaust]

Coincido con stramin.

Tradicionalmente la solución a los problemas de portapapeles era usar Flash. Existen películas Flash a las que podés pasarle un texto arbitrario, y la película se encarga de cargarlo en el portapapeles del usuario. Internet está lleno de tutoriales al respecto; buscá "copy text to clipboard with Flash". ZeroClipboard es una de estas soluciones.

Hoy en día, con la proliferación de dispositivos que no corren Flash, me decantaría por una opción como la de stramin: mostrar una ventana elegante al usuario e indicarle que copie ese texto manualmente.

Si querés complicarte la vida, podés detectar las features del dispositivo del usuario con alguna librería JavaScript especializada como Modernizr, y decidir entre usar Flash o una ventana para copiar manualmente.

Por último, si te quedan neuronas sanas, existe un truquito inventado por un miembro del equipo de Trello que es extremadamente original. Esencialmente le pedís al usuario que clickee en el elemento que desea copiar, y que aprete CTRL + C (el acceso directo de copiar, al que la mayoría de los usuarios están acostumbrados). Entonces, con JavaScript, detectás esto y seleccionás un texto invisible, para que el navegador lo copie al portapapeles. Acá está la técnica, explicada por el inventor:

http://stackoverflow.com/questions/1...sers-clipboard

[VityOsma]

Al final he puesto que al pasar el ratón por encima aparezca una capa al lado con el texto que se va a copiar ya seleccionado para que el usuario pulse control+c, el ZeroClipboard en flash no he conseguido utilizarlo, pero el resultado ha sido bueno, gracias!