Blog
Copiar un texto al portapapeles en Java Script
Java Script nos permite agregar múltiples funcionalidades a nuestras páginas web para poder hacerlas más dinámicas y en consecuencias más llamativas para los usuarios. En este tutorial aprenderemos a copiar un texto al portapapeles en Java Script.
Cómo copiar un texto al portapapeles en Java Script
Para poder realizar esta tarea vamos a crear un campo de texto utilizando la etiqueta textarea, y un botón, que al presionarlo vamos a ejecutar la función copiarAPortapapeles que copiará el texto del textarea al portapapeles.
<!DOCTYPE html>
<html>
<head>
<title>Copiar un texto al portapapeles en Java Script</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>
<textarea id="textarea" rows="6" cols="40">Texto que queremos copiar al portapapeles!
</textarea><br/>
<button id="copyBlock">Click para copiar</button> <span id="copyAnswer"></span>
</body>
<script language="JavaScript">
// Establecemos las variables
var textarea = document.getElementById("textarea");
var answer = document.getElementById("copyAnswer");
var copy = document.getElementById("copyBlock");
copy.addEventListener('click', function(e) {
// Sleccionando el texto
textarea.select();
try {
// Copiando el texto seleccionado
var successful = document.execCommand('copy');
if(successful) answer.innerHTML = 'Copiado!';
else answer.innerHTML = 'Incapaz de copiar!';
} catch (err) {
answer.innerHTML = 'Browser no soportado!';
}
});
</script>
</html>
Del código anterior lo más importante que podemos destacar son las funciones textarea.select() (la cual se encarga de seleccionar el texto ingresado por el usuario) y document.execCommand(‘copy’) (simplemente copia el texto seleccionado al portapapeles).
Lo interesante del código anterior es que es soportado por la mayoria de los navegadores modernos, incluyendo el Internet Explorer.
Bueno gente, hemos llegado al final de este breve tutorial en el cual explicamos cómo copiar un texto al portapapeles en Java Script, espero que les sea de gran utilidad y ante cualquier inconveniente no duden en enviar un comentario.