Cómo crear el botón Copiar al portapapeles en JavaScript

JavaScript es un lenguaje de programación web que hace que nuestro sitio web sea interactivo al darle la capacidad de pensar y actuar. El botón Copiar al portapapeles es una necesidad en muchos sitios web, por ejemplo, si ha desarrollado un sitio web que parafrasee sus oraciones, o su sitio web es un removedor de plagio, o es un campo de texto simple que le permite al usuario escribir datos en línea. Para mejorar la experiencia del usuario, los sitios web que proporcionan información y esa información se requiere en otras secciones del sitio web, el sitio web requiere el botón Copiar al portapapeles. Entonces, al observar todos estos usos, implementemos un programa de JavaScript que responda a la pregunta de cómo crear el copiar al portapapeles botón en JavaScript.

Html

HTML es un lenguaje de hipertexto marcado que proporciona estructura a nuestro sitio web. Usaremos HTML para crear un campo de entrada que el usuario utilizará para ingresar algún texto. Luego se creará un botón, que cuando se haga clic en el clic copiará cualquier cosa que esté en el campo de entrada. Al final, utilizaremos una etiqueta de script para hacer referencia al archivo JavaScript que tiene código JavaScript:

Copiar

Usamos el identificación atributo en la etiqueta de entrada para que podamos hacer referencia más tarde desde el archivo JavaScript. También inicializamos el al hacer clic evento que significa cada vez que el usuario hace clic en el Copiar botón, el handleclick () la función se ejecutará.

Javascript

Inicializamos una función con el nombre de HandLecLick () para que cada vez que el usuario haga clic en el botón Copiar el código en esta función comenzará a ejecutar. Dentro de la función, utilizando el atributo de identificación del campo de entrada, hacemos referencia al campo de entrada y adjunta .Valor en el final para que el valor del campo de entrada se almacene en la entrada variable. Ahora que tenemos el valor del campo de entrada, copiemos el valor al portapapeles usando el navegador.portapapeles.escribir () función donde pasamos la variable de entrada como parámetro. El texto de la variable de entrada ahora se copia en el portapapeles. Al final, alerta a la variable de entrada.

function handLecLick ()
/ * Guardar el valor de mytext a la variable de entrada */
entrada var = documento.getElementById ("mytext").valor;
/ * Copie el texto dentro del campo de texto */
navegador.portapapeles.WriteText (entrada);
alerta ("Texto copiado:" + entrada);

Ingresamos el texto Copiar al artículo de portapapeles en el campo de entrada y ahora haremos clic en el Copiar botón. Veremos una alerta que muestra el texto copiado:

Vaya a una ventana nueva o un archivo de Word y presione CTRL+V que pegará el Copiar al artículo del portapapeles en esa ventana.

Conclusión

El botón Copiar al portapapeles es muy útil cuando está haciendo un sitio web que usa información de una sección a otra, por lo tanto, mejora la experiencia del usuario. El botón Copiar al portapapeles también es un proyecto para un principiante que quiere practicar sus habilidades de JavaScript.

En esta publicación, implementamos la copia al botón del portapapeles en JavaScript junto con capturas de pantalla y un GIF.