Copy Clipboard Button: copiar al portapapeles con Flash y Javascript

Navegue bastante por la red sin finalmente encontrar el script que me sirva para copiar al portapapeles un texto mediante un botón, en un articulo anterior escribí sobre esto, en sus tiempos si funcionaba pero ahora con los cambios que hubo en Flash ya no cumple con el objetivo, es por eso que entrando a la pagina de bit.ly vi que lo podían hacer, y en casi todos los navegadores, me baje los scripts y los filtre hasta lograr obtener las funciones que hacían la funcionalidad de copiar al portapapeles.

Para empezar a implementarlo primero tienen que bajarse el Javascript y el botón Flash.

Descargar Archivos

Paso 1: Incluir e inicializar el Script

Aquí incluiremos el script que nos bajamos y luego agregaremos esta función para customizar más la librería.

var navegador = navigator.appName;

function addIndexCopyButton(){

    if (navegador != 'Microsoft Internet Explorer') {

        var b={
            pathToSwf:"ccb.swf?v=3.0",        
            imageUrl:"button.jpg",
            height:"26",
            textValue:"Copiar",
            width:"46"
         };
         $("#index_copy_button").html("");
         CopyClipboardButton.appendButton("index_copy_button","short_url",b);

    }else{
        $("#index_copy_button").html(&#039;<img onclick="copiarIE();" src="button.jpg" border="0"/> &#039;);
    }
}

function copiarIE(){
   document.getElementById("short_url").select(); 
    window.clipboardData.setData("Text", $("#short_url").val());
}
window.onload = function(){
    addIndexCopyButton();
}; 

Actualización: Se incluyo una condicional para problemas con el copiado en IE9, gracias a JULIO GARY por el aporte!

Esta función es para personalizar nuestro botón: setearles el directorio del swf e imagen, cambiar el alto y ancho, configurar el texto (para IE)

Paso 2: Estructura HTML

Creamos un textbox para poder probar si copia o no lo que ingresamos, un elemento donde se insertara por Javascript el Flash que realizara la función de copiar al portapapeles.

<form action="" method="get">
    <input  name="short_url" id="short_url" type="text"/>
    <span id="index_copy_button"></span>
</form>

Ejemplo

jfdghjhthit45

También te puede interesar

7 Comments

  1. Copy Clipboard Button: copiar al portapapeles con Flash y … « Blog de Flash
    abr 09, 2010 @ 01:23:30

    [...] Navegue bastante por la red sin finalmente encontrar el script que me sirva para copiar al portapapeles un texto mediante un botón, en un articulo anterior escribí sobre esto, en sus tiempos si funcionaba pero ahora con los cambios que … More:  Copy Clipboard Button: copiar al portapapeles con Flash y … [...]

  2. Juan Ignacio
    may 06, 2010 @ 23:44:15

    Internet esta lleno de artículos que no funcionan pero el tuyo. Mil gracias!

    La unica duda es… como hago que funcione con s en vez de s ?

  3. Juan Ignacio
    may 06, 2010 @ 23:53:21

    Encontre la respuesta. Para que funcione con (campo con varias líneas) hay que agregar la propiedad type=”text” y queda algo asi

  4. Lolo
    jul 18, 2010 @ 19:12:43

    Lo he estado probando y no me va ni en firefox, ni en Chrome y qué decir en ie, que ni siquiera me pone el botón. A ver si alguien puede explicarme qué es lo que que estoy omitiendo. Vamos, me he bajado los dos archivos y no hay manera. Muchas gracias a todos.

  5. Francisco
    ago 31, 2010 @ 08:39:15

    Amigo se cae en IE… con los demas navegadores no hay problema

    • craftyman
      sep 03, 2010 @ 18:43:31

      Gracias por el dato Francisco, estare chekando a ver que puede fallar.

      Saludos.

  6. Cómo hacer un botón para copiar texto al portapapeles | Daniel Pradilla
    mar 12, 2011 @ 17:54:48

    [...] demonios incluye una definición de la función $() en su código?!) terminé decidiéndome por este. Ligero y bien implementado, @craftyman hizo un buen paquete que no [...]