Objetivos del blog.
Después de leer este blog, podrá saber cómo se pueden copiar los datos al portapapeles con la ayuda del script java.
Beneficio de la funcionalidad de copiar al portapapeles.
En el mundo web actual, se trata del usuario experimentado de su sitio. Durante nuestro trabajo en cualquier sitio, copiamos el contenido de un lugar y lo pegamos en otro. Será realmente útil para el usuario si un sitio ofrece una funcionalidad de clic para copiar. Se ahorra tiempo y esfuerzo del usuario para seleccionar y copiar el contenido.
Implementación de la funcionalidad de copiar al portapapeles.
Veamos cómo podemos agregar esta funcionalidad:
Paso 1:
Cree un HTML con un párrafo que tenga contenido y haga clic en el botón. Puede usar cualquier elemento relevante en lugar de un párrafo, por ejemplo, cuadro de texto, área de texto, campos ocultos, etc.
<body> <p id = "txt_knoband"> KnowBand cuenta con los mejores complementos de la industria para sistemas de comercio electrónico y tiene años de experiencia trabajando con sitios web de comercio electrónico. </p> <button onclick = "onClickCopy ()"> Copiar texto < / botón> </body>
Paso 2:
Deberá crear una función enClickCopy () que copiará los datos del párrafo. La función simplemente ejecutará "document.execCommand (" copy ")" para copiar los datos en el portapapeles.
function copyOnClick () {var tempInput = document.createElement ("input"); tempInput.value = document.getElementById ("txt_knoband"). innerHTML; document.body.appendChild (tempInput); tempInput.select (); document.execCommand ("copia"); document.body.removeChild (tempInput); alerta ("valor copiado"); }
In the last line of the script, we have simply added an alert action to inform the user that the data has been copied.
So finally when you click on the button “Copy Text”, data will be copied to the clipboard and you can simply paste by using CRTL + V.
Related Article: Cómo configurar una cookie usando JavaScript
