Copiar al cortapapeles

facebook-svg gplus-svg twitter-svg

Copiar al portapapeles

Para poder copiar al portapapeles ( copy to clipboard ) necesitamos un documento en designMode o un elemento cuyo contenido es editable contenteditable = "true" por ejemplo un elemento <textarea>.

Cuando el contenido de un documento ( o parte de este ) es editable podemos utilizar el método document.execCommand() para copiar al portapapeles.

En el siguiente ejemplo vamos a utilizar una declaración try. . .catch que marca un bloque de instrucciones para intentar ( try ), y especifica una respuesta si se produce una excepción ( catch ).
El método select es utilizado para seleccionar el contenido del campo de texto


botonCopiar.addEventListener("click", function(event) {   
  // el método select es utilizado para seleccionar el contenido del campo de texto
    Texto.select();
 try {
      // el método document.execCommand("copy") copia el texto seleccionado al portapapeles
      let exito = document.execCommand("copy");// devuelve true o false
      let msg = exito ? "\351xito" : "error";
      console.log(msg);
} catch (error) {
      let err = error;
      console.log("No fue posible copiar el texto seleccionado!");
    }
  }); 

See the Pen JS: copiar al portapapeles #1 by Gabi (@enxaneta) on CodePen.

Recuperar el texto seleccionado con JavaScript

A veces queremos dar al usuario la posibilidad de seleccionar y copiar solo una parte del texto.

En el siguiente ejemplo la función seleccionarTexto() se encarga de recuperar la parte de texto seleccionada.


window.addEventListener("select",seleccionarTexto,false)
function seleccionarTexto(){
    // texto seleccionado desde este punto
    let desde = Texto.selectionStart;
    // hasta este punto
    let hasta = Texto.selectionEnd;
    let sel = Texto.value.substring(desde, hasta);
    console.log(sel);
  }

El programa llama la función seleccionarTexto() cuando se dispara el evento "select" o sea cuando, después de seleccionar alguna parte del texto, soltamos el ratón.

Vea este ejemplo en Codepen Abra la consola de su navegador para ver el resultado.

Copiar al portapapeles el texto seleccionado

Ahora lo podemos poner todo junto:


function seleccionarTexto() {
  let desde = Texto.selectionStart;
  let hasta = Texto.selectionEnd;
  let sel = Texto.value.substring(desde, hasta);

  if (sel.length > 0) {// si hay algo seleccionado
    return sel;
  } else { // de lo contrario selecciona todo el texto
    return Texto.select();
  }
}

botonCopiar.addEventListener("click", () => {  
  seleccionarTexto();
  try {
    let exito = document.execCommand("copy"); // devuelve true o false
    // el mensaje a sacar en consola en caso de éxito o de error
    let msg = exito ? "\xe9xito" : "error";
    console.log("Hay " + msg);
  } catch (error) {
    let err = error;
    console.log("No fue posible copiar el texto seleccionado!");
  }
});

Vea este ejemplo en codepen:

See the Pen JS: copiar al portapapeles el texto seleccionado #3 by Gabi (@enxaneta) on CodePen.