Copiar al portapapeles
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.