TEDnología, Noticias sobre tecnologia, Tips web, Gadgets, Redes Sociales

Copy Clipboard Button: copiar al portapapeles con Flash y Javascript

| 7 Comments

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.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="js/ccb.js" type="text/javascript"></script>
<script type="text/javascript">
function addIndexCopyButton(){
    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);
}
addLoadEvent(function(){
      addIndexCopyButton();
});
</script>

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 <span> 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

También te puede interesar

Comentarios