Esta función en si permite copiar textos que se encuentra dentro de un div, se utilizara: HTML, CSS, JS.
Nota: El diseño original pueden encontrar en Codepen
Primeramente se necesita un icono que nos permita referenciar un botón de copiar, puede colocar la palabra copiar u optar por un icono.
En esta ocasión se utilizo la libraría Font Awesome para integrar el icono.
Pasos para insertar el codigo
Debajo de la etiqueta <head> inserte el código script, el siguiente código nos permite visualizar los iconos de Font Awesome
<script crossorigin="anonymous" src="https://kit.fontawesome.com/cf0160c90b.js"></script>
Luego se incluye debajo de la etiqueta <body> la estructura HTML. Consiste en cuatro id: contenedor, enlace, copiador, exito.
A si vez con una class: exito
<div id="contenedor">
<div>
<span id="enlace">
https://ectryc.blogspot.com
</span>
<button id="copiador"> <i class="fa fa-clone" aria-hidden="true"></i> </button>
<p class="exito" id="exito"> Copiado</p>
</div>
</div>
Posteriormente insertamos el código CSS arriba de la etiqueta </body> para el diseño. Puede modificar el color del body en la propiedad background-color:
<style type="text/css">
body {
background-color: #5c1433;
}
#contenedor {
width: auto;
height: 200px;
margin: 0px auto;
display: flex;
justify-content: center;
align-items: center;
}
#contenedor > div {
display: flex;
}
span#enlace {
color:#a99384;
font-size: 1.3em;
padding: 9px 14px;
background: #5c1433;
box-shadow: 6px 6px 12px #54122e,
-6px -6px 12px #641638;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
button#copiador {
background:#370b1e;
box-shadow: 6px 6px 12px #54122e,
-6px -6px 12px #641638;
color: #a99384;
border: none;
padding: 10px;
font-size: 1.2em;
display: inline-block;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
cursor: pointer;
}
button#copiador:hover {
background-color:#49122a; color: #000;
}
button#copiador:hover .fa-clone{
transition: 0.5s;
transform: rotate(45deg);
}
.fa-clone{
transition: 0.5s;
}
button#copiador:active {
transform: scale(1.01);
background: #370b1e;
box-shadow: inset 6px 6px 12px #2e0919,
inset -6px -6px 12px #400d23;
}
button#copiador:focus {
outline: none;
}
.exito{
background: #000;
position:absolute;
top: 7%;
left:58%;
border-radius:3px;
padding: 3px;
color: brown;
display: none;
font-size: 12px;}
.exito-activo{
display: block}
</style>
Finalmente se inserta el código Js arriba de la etiqueta </body>
<script type="text/javascript">
var boton = document.getElementById("copiador");
boton.addEventListener("click", copiarAlPortapapeles, false);
function copiarAlPortapapeles() {
var enlace = document.getElementById("enlace");
var inputFalso = document.createElement("input");
inputFalso.setAttribute("value", enlace.innerHTML);
document.body.appendChild(inputFalso);
inputFalso.select();
document.execCommand("copy");
const boton = document.getElementById('copiador');
if(enlace){
document.body.removeChild(inputFalso);
document.getElementById('enlace').style.color='#000';
document.getElementById('exito').classList.add('exito-activo');
setTimeout(() => {
document.getElementById('enlace').style.color='#a99384';
document.getElementById('exito').classList.remove('exito-activo');
}, 1000);
}
}
</script>
Nota:
Puede insertar Función copiar texto al portapapeles en un Gadget en blogger de la siguiente manera:
- Accede a Blogger.
- En el menú de la izquierda, haz clic en Diseño.
- En la sección donde quieras mostrar las páginas, haz clic en Agregar un gadget.
- Haz clic en el gadget HTML/JavaScript, luego inserta el código.
Segundo modo
Usando Clipboard.js se puede realizar la misma función de una manera mas sencilla sin mucho código.
Primeramente incluiremos la librería clipboard.js
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>
Seguido dentro de la etiqueta <body> agregamos el siguiente código HTML.
<div class="text_copy">
<p> <span id = "texto">Bienvenido a Ectryc </span> </p>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#texto"><i class="fa fa-clone" aria-hidden="true"></i></button>
</div>
<div class="text_copy">
<p> <span id = "texto1">Welcome to Ectryc</span> </p>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#texto1"><i class="fa fa-clone" aria-hidden="true"></i></button>
</div>
Para agregar estilo insertamos el siguiente código CSS seguido del código HTML.
<style>
body{background:#252525; color: white;}
.text_copy{ background:#8b3d09; padding: 5px; border: solid 1px #582604; border-radius: 5px;}
.btn{background:#3c1c06;
color: aliceblue;
border:solid 0px;
position: relative;
top:-52px;
z-index: 9999999;
float: right;
padding: 3px;
border-radius: 3px;}
.btn:hover{background:#9bee77; color: #000}
</style>
Por último inserta el script arriba de la etiqueta </body> .
<script>
var clipboard = new Clipboard('.btn');
/*Visualizar en consola*/
clipboard.on('success', function (e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
});
clipboard.on('error', function (e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
});
</script>
;)
ResponderEliminar;
ResponderEliminar