Cómo copiar texto al portapapeles con JavaScript?

Copia de texto de contenido es uno de los relativamente nueva accesibilidad que ofrecen muchos sitios web modernos. En este artículo, vamos a aprender cómo copiar texto al portapapeles con JavaScript ?

JavaScript fue construido para proporcionar la interacción y la accesibilidad a las páginas web. Tanto si se está enfocando un texto o animaciones en el cursor del mouse, JavaScript funciona perfectamente. Copia de texto de contenido es uno de los relativamente nueva accesibilidad que ofrecen muchos sitios web modernos. En este artículo, vamos a aprender cómo copiar texto al portapapeles con JavaScript y ayudar a sus visitantes a ahorrar tiempo mediante la selección de texto, hacer clic derecho y seleccionar la opción de copia o pulsando Ctrl + C cada vez.

Necesitamos definir el margen de beneficio a partir del cual el código JavaScript se llevará a la introducción de texto. Puede ser cualquier cosa, párrafo o lista, pero en este ejemplo, vamos a utilizar área de texto contenido.

Código – HTML

<button class="js-textareacopybtn">Copy Text</button>
<textarea class="js-copytextarea">Include Help copying text content example</textarea>

Aquí tenemos un botón que se acaba de copiar el texto del área de texto y pegar en el portapapeles cuando se hace clic en él. Tenemos que proporcionar una secuencia de comandos para que este botón hace su magia.

Código – JavaScript

var copyTextareaBtn = document.querySelector('.js-textareacopybtn');
copyTextareaBtn.addEventListener('click', function(event) {
var copyTextarea = document.querySelector('.js-copytextarea');
copyTextarea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
});

En este código, se define el copyTextareaBtn que contiene el elemento de botón y añadir un detector de eventos a lo cual tendrá un evento pasado como parámetro en devolución de llamada. En primer lugar, obtenemos la copyTextarea variable como elemento de área de texto cuyo texto será copiado. Para copiar el texto, que primero tiene que seleccionarlo y lo hacemos mediante el seleccione () método en el elemento que selecciona el contenido.

A continuación, hacemos un class prueba- para asegurarse de que el sistema y navegador es compatible con la copia de contenido. Llamamos a la execCommand ( ‘copia’) que copiará el texto y class el estado. Entonces tenemos que mostrar un mensaje al usuario que se basa en el valor devuelto por el comando de copia. Si era cierto, a continuación, mostrar el mensaje de que el comando de texto copiado se ha realizado correctamente de lo contrario, class el error y la pantalla, el mensaje de éxito.

Se trata de cómo podemos implementar la funcionalidad de copia y proporcionar una mejor experiencia de usuario class nuestros visitantes ahorro de sus clics del ratón y las pulsaciones de teclado. Espero que les guste el artículo; compartir sus pensamientos en los comentarios a continuación.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *