Copiar texto al portapapeles en JavaScript
-
Copiar texto al portapapeles usando el método
Document.execCommand()en JavaScript -
Copiar texto al portapapeles usando la API
Clipboarden JavaScript
Hoy en día, muchos desarrolladores web quieren implementar una funcionalidad en sus sitios web que les permita a sus usuarios copiar directamente un montón de texto de su sitio web con un solo clic. Algunos de los ejemplos más utilizados de esto serían copiar un comando de terminal o fragmentos de código completos de cualquier sitio web técnico.
Veamos qué queremos decir con un portapapeles y cómo funciona todo este proceso. Después de eso, implementaremos esta funcionalidad de copia al portapapeles en JavaScript.
Todo lo que está presente dentro de nuestras computadoras, como aplicaciones, imágenes, texto, archivos, etc., se llama datos. Entonces, siempre que intentemos copiar algo presente dentro de nuestra computadora, nuestra computadora asignará una pequeña parte de la memoria a nuestros datos que hemos copiado para almacenar esos datos dentro de ese espacio de memoria. Esto se llama portapapeles, y así es como la computadora recuerda la información que ha copiado. Ahora que tenemos los datos almacenados dentro de la memoria, podemos tomar estos datos y luego pegarlos o usarlos tantas veces como queramos.
En teoría, suena simple, pero en la práctica es difícil de implementar porque hay muchas complejidades involucradas. Pero no se preocupe, usando JavaScript, podemos hacer esto de una manera mucho más simple con la ayuda del método Document.execCommand() y la Clipboard API.
Copiar texto al portapapeles usando el método Document.execCommand() en JavaScript
Este es el método más utilizado para interactuar con el portapapeles. Con este método, puede realizar las siguientes 3 operaciones.
- Copie el texto en el portapapeles usando
Document.execCommand('copy') - Corte el texto y agréguelo al portapapeles usando
Document.execCommand('cut') - Pegue el contenido que ya ha estado presente en el portapapeles usando
Document.execCommand('paste')
Observe que tenemos que pasar el parámetro de qué operación queremos realizar. En este artículo, solo nos centraremos en la operación de copia y no en las demás. Tomemos un ejemplo y entendamos esta operación de copia.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<textarea id="textArea">We are learning to copy text to clipboard in JavaScript.</textarea>
<button onclick="copyToClipBoard()">Copy</button>
<script src="link to your JS file"></script>
</body>
</html>
function copyToClipBoard() {
var content = document.getElementById('textArea');
content.select();
document.execCommand('copy');
alert('Copied!');
}
Primero, tenemos el archivo HTML con un textarea que contiene una cadena y un button. Nuestro objetivo aquí es copiar el texto presente dentro del textarea cuando hacemos clic en el botón Copy. En segundo lugar, tenemos un archivo JS dentro del cual tenemos una función llamada copyToClipBoard(). Esta función se encargará de copiar el texto al portapapeles.
Inicialmente, tenemos que obtener el textarea presente dentro de nuestro DOM usando document.getElementById, y almacenaremos este elemento dentro de la variable content. Ahora tenemos el contenido del textarea dentro de nuestra variable content. Para copiar el texto, primero tenemos que seleccionar todo el texto usando el método select(). Esto es similar a cómo seleccionar texto usando nuestro mouse.
Usando el método document.execCommand('copy'), copiaremos el texto seleccionado, y mostraremos una alerta al usuario para hacerle saber que el texto ha sido copiado al portapapeles.
Por último, tenemos que llamar a la función copyToClipBoard() en nuestro botón Copy como un evento onClick. Ahora, si abre esta página HTML en su navegador, verá los resultados finales.
Copiar texto al portapapeles usando la API Clipboard en JavaScript
La API Clipboard proporciona operaciones asincrónicas de lectura y escritura mediante las cuales puede copiar y pegar contenido hacia y desde el portapapeles. La API del Portapapeles está disponible dentro del objeto navigator.clipboard.
Esta API es una nueva incorporación al lenguaje JavaScript y no todos los navegadores podrán admitirla, especialmente los antiguos. Si desea verificar si su navegador es compatible con esta API o no, puede usar el siguiente código.
if (!navigator.clipboard) {
// Clipboard API not available
return
}
Veamos cómo usar la API del Portapapeles para copiar texto al portapapeles.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<textarea id="textArea">We are learning to copy text to clipboard in JavaScript.</textarea>
<button id="btn" onclick="copyToClickBoard()">Copy</button>
<script src="link to your JS file"></script>
</body>
</html>
function copyToClickBoard() {
var content = document.getElementById('textArea').innerHTML;
navigator.clipboard.writeText(content)
.then(() => {console.log('Text copied to clipboard...')})
.catch(err => {
console.log('Something went wrong', err);
})
}
El código anterior es casi similar al código que hemos visto antes. La única diferencia aquí es que hemos modificado la función copyToClickBoard(). Este método será llamado cuando presionemos el botón Copy. Dentro de esta función, primero obtenemos el texto presente dentro del textarea usando la propiedad innerHTML y almacenando ese texto dentro de la variable content.
El objeto navigator.clipboard tiene dos métodos. Uno es el método writeText() utilizado para copiar el texto al portapapeles, y otro es el método readText() que se utilizará para leer el texto presente dentro del portapapeles pegándolo. Aquí, solo nos preocupa el método writeText().
Dentro de este método, tenemos que pasar la variable content, que actualmente contiene todo el texto en formato de cadena. Después de eso, este método tomará el texto y lo copiará en el portapapeles. Si esto tiene éxito, mostraremos un mensaje Text copied to clipboard... de lo contrario, lanzaremos un mensaje de error dependiendo del tipo de error que ocurrió.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn