Copy Clipboard Button: copiar al portapapeles con Flash y Javascript

7
320

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.

[javascript]
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();
};
[/javascript]
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.

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

Ejemplo

jfdghjhthit45

7 COMMENTS

  1. 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.

Comments are closed.