Portapapeles para la web, ¡sin Flash!

27 septiembre, 2015 18:55 por

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks.

Como parte de nuestros esfuerzos para hacer crecer la plataforma web, y hacerla accesible a nuevos dispositivos, intentamos reducir la dependencia de Flash. Como parte de ese esfuerzo estamos estandarizando y exponiendo características muy usadas que solo estaban disponibles con Flash, para toda la plataforma web.

Una de las razones de por qué muchas páginas web aún usan Flash, es porque tienen un API para copiar y cortar al portapapeles. Esto ha sido usado para implementar muchas características útiles como el botón de GitHub ‘clonar URL’. También es útil para cosas como las UI de los editores, los cuales quieren tener un botón para copiar al portapapeles, en lugar de que los usuarios usen los comandos de teclado, o usar el menú contextual.

GitHub - copiar URL

Desafortunadamente, las APIs Web aún no han implementado las funcionalidades de copiar texto al portapapeles mediante JavaScript, es por eso que cuando visitas GitHub con Flash deshabilitado, ves un a fea caja gris donde se supone que estaría el botón. Afortunadamente tenemos una solución. Las APIs de edición proveen document.execCommand como un punto de entrada para ejecutar comandos de editor. Los comandos “copy” y “cut” estaban deshabilitados para las páginas web, pero con Firefox 41 se podrán hacer callbacks de JavaScript iniciados con acciones de usuario.

Usando execCommand(“cut”/“copy”)

La API execCommand(“cut”/“copy”) solo esta disponible durante un callback que un usuario haya ejecutado, como un click. Si intentas llamarlo en otro momento, retornara false, lo que quiere decir que el comando falló. Correr el execCommand(“copy”) copiara la sección seleccionada al portapapeles. Vamos a ver la programación básica.

// botón al que agregaremos el evento
var button = ...;
// input con el texto a copiar 
var input = ...;

button.addEventListener("click", function(event) {
  event.preventDefault();
  // seleccionar el contenido del input
  input.select();
  // copiarlo al portapapeles
  document.execCommand("copy");
});

Ese código hará que se copie el texto del input al portapapeles cuando se haga click en el botón en Firefox 41 y las versiones siguientes. Sin embargo, probablemente quisieras manejar los fallos que se produzcan, potencialmente hacer un fallback a otra solución como Flash, así como ZeroClipboard, o incluso solo decirle al usuario que su navegador no soporta esa funcionalidad.

El método execCommand retornaría false si la acción falla, por ejemplo, si se llama fuera de la acción de un usuario, pero en versiones viejas de Firefox también se lanza una excepción de seguridad si se intenta usar el API de "cut" o "copy". Así que si quieres asegurarte de capturar todos los fallos encierra la llamada en un try-catch, e interpretar la excepción como una falla.

// botón al que agregaremos el evento
var button = ...;
// input con el texto a copiar
var input = ...;

button.addEventListener("click", function(event) {
  event.preventDefault();
  input.select(); // seleccionar el contenido del input
  var succeeded;
  try {
    // copiarlo al portapapeles
    succeeded = document.execCommand("copy");
  } catch (e) {
    succeeded = false;
  }
  if (succeeded) {
    // la copia fue exitosa
  } else {
    // la copia falló 🙁
  }
});

La API "cut" también es expuesta a páginas web mediante el mismo mecanismo, solamente s/copy/cut, y estás listo.

Probando características

La APIs del editor proveen un método document.queryCommandSupported("copy") el cual intenta permitir a los consumidores de la API determinar cuando un comando es soportado por el navegador. Desafortunadamente, en versiones anteriores a 41, retornamos true en document.queryCommandSupported("copy") incluso si la pagina no pudo copiar el contenido. Aun así, intentar document.execCommand("copy") lanzará un SecurityException. Así que intentar copiar mientras carga, y buscar esta excepción es probablemente la manera más sencilla de detectar si la característica document.execCommand("copy") se soporta en Firefox.

var supported = document.queryCommandSupported("copy");
if (supported) {
  // ver si no es un Firefox antes del 41
  try {
    document.execCommand("copy");
  } catch (e) {
    supported = false;
  }
}
if (!supported) {
  // utilizar una alternativa como ZeroClipboard
}

Soporte en otros navegadores

Google Chrome, e Internet Explorer, ambos soportan esta API. Chrome usa la misma restricción que Firefox, (la cual debe ser iniciada por una acción de un usuario). Internet Explorer permite que pueda ser llamada en cualquier momento, excepto que primero muestra un diálogo, pidiéndole permiso de acceso al portapapeles al usuario.

Para más información sobre el API y el soporte de navegadores, visita la documentación de document.execCommand() en el MDN.

The following two tabs change content below.
Si, mi biografia esta vacia. 🙂

Compartir artículo:

Notable Replies

Continue the discussion foro.mozilla-hispano.org

Participants

  • ¡Participa!

    Firefox Friends »
    Agrega botones de Firefox en tu sitio web y comparte tu amor por Mozilla Firefox.
    Armada alucinante »
    Ayuda a otros usuarios en Twitter.
    Colabora con la comunidad »
    En Mozilla lo importante son las personas. Descubre cómo puedes colaborar.

    Boletín Firefox

    Suscríbete al boletín de novedades de Firefox.

  • Descargas

    Descarga los programas de Mozilla.

    Lo más visto

    cc-by-sa