Auto copiar texto con JavaScript
Si programas páginas webs o aplicaciones que utilizarán usuarios de forma contínua, seguramente estarás pensando que facilitar su trabajo es un punto muy importante.
Facilitando el trabajo
Por ejemplo, si en tu aplicación el usuario necesita copiar textos habitualmente, quizás debas implementar una funcionalidad para facilitar su trabajo.
En este caso, te mostraremos cómo con JavaScript puedes lograr auto copiar un texto al portapapeles haciendo click encima de un párrafo.
Código
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Copy example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
<style type="text/css">
.autoCopy:hover{
cursor: pointer;
background-color: lightgray;
}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
/* Auto-copy */
var elementsCanCopy = document.getElementsByClassName("autoCopy");
for (var i = 0; i < elementsCanCopy.length; i++) {
elementsCanCopy[i].onclick = function() {
document.execCommand("copy");
}
elementsCanCopy[i].addEventListener("copy", function(event) {
event.preventDefault();
if (event.clipboardData) {
event.clipboardData.setData("text/plain", this.textContent);
}
});
}
});
</script>
</head>
<body>
<div class="container">
<div class="row mt-5 mb-3">
<div class="col-md-12">
<h2>Copy</h2>
<p class="lead">Example</p>
<hr/>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h2>Auto copy text</h2>
<p class="lead">This text is auto-copied when click</p>
<div class="w-75 autoCopy">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</div>
</div>
</body>
</html>En este cóigo, simplemente detectamos el click en los elementos que tienen una clase de CSS autoCopy y se ejecuta el copiado desde el elemento al portapapeles.
Aunque se trata de una funcionalidad extremadamente básica, aporta una mejora de funcionalidad a los usuarios, que con un simple click verán copiado el contenido al clipboars.