En este artículo, discutiremos cómo crear una copia en el botón del portapapeles.
Hay múltiples escenarios en el desarrollo web en los que tenemos que dar al usuario la funcionalidad de copiar ciertos datos en un portapapeles usando un botón. Ya sea una muestra de código o información propia del usuario, podemos crear un botón de copia para copiar datos al portapapeles usando la función navigator.clipboard.writeText(). Esta función escribe los datos que recibe como parámetro en el portapapeles. Podemos usar esto para copiar cualquier texto al portapapeles.
Primero, seleccionamos el texto para copiar al portapapeles, ya sea desde un div o desde un cuadro de entrada usando document.getElementById() o cualquier otra función adecuada. Luego almacenamos el valor de ese texto en una variable y pasamos esa variable como argumento a la función navigator.clipboard.writeText() para copiarlo en el portapapeles.
Sintaxis:
navigator.clipboard.writeText( <text> )
Dónde
<texto>: determina la variable de string que se copiará.
Ejemplo 1: aquí hemos agregado un botón Copiar al portapapeles a un div con texto para copiar el texto de muestra en el portapapeles.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 100px;
}
#textbox {
width: 40vw;
height: 30vh;
position: absolute;
margin-left: 50px;
margin-top: 20px;
}
button {
width: 70px;
height: 40px;
margin-top: 120px;
margin-left: 50px;
background-color: green;
color: white;
border-radius: 10px;
box-shadow: grey;
position: absolute;
}
#sample {
width: 70vw;
margin: 50px;
background-color: green;
color: white;
padding: 20px;
font-size: x-large;
position: absolute;
}
h1 {
margin-left: 50px;
margin-top: 160px;
}
</style>
</head>
<body>
<div id="sample">
Geeksforgeeks is best learning platform.
</div>
<br />
<button onclick="copyText()">Copy</button>
<br />
<h1>Copied Text:</h1><br />
<textarea id="textbox"></textarea>
<script>
function copyText() {
/* Copy text into clipboard */
navigator.clipboard.writeText
("Geeksforgeeks is best learning platform.");
}
</script>
</body>
</html>
Producción:
Producción
Ejemplo 2: aquí, hemos copiado texto de un área de texto donde el usuario puede escribir su propio texto y luego copiarlo en el portapapeles, y ese texto también se muestra en la banda inferior.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#textbox {
width: 70vw;
height: 30vh;
}
button {
width: 70px;
height: 40px;
background-color: green;
color: white;
border-radius: 10px;
box-shadow: grey;
}
#clipboard {
width: 70vw;
margin: 50px;
background-color: green;
color: white;
padding: 20px;
font-size: x-large;
}
</style>
</head>
<body>
<center>
<textarea id="textbox"></textarea><br />
<button onclick="copyText()">Copy</button>
<br />
<h1>Copied Text:</h1><br />
<span id="clipboard">NA</span>
</center>
<script>
function copyText() {
/* Select text area by id*/
var Text = document.getElementById("textbox");
/* Select the text inside text area. */
Text.select();
/* Copy selected text into clipboard */
navigator.clipboard.writeText(Text.value);
/* Set the copied text as text for
div with id clipboard */
document.getElementById("clipboard")
.innerHTML = Text.value;
}
</script>
</body>
</html>
Producción:
Producción
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA