Interacción copiar a Portapapeles con JavaScript y CSS

Vista prévia

Descripción

Aplica un copiar a la funcionalidad del portapapeles a cualquier contenido de texto seleccionado dentro del documento.

Funcionamiento

Agregue la clase CSS ' Copy-clic ' a cualquier cadena que desee copiar.

<a href="" class="copy-click">Text Here</a>

Defina la copia & texto copiado que se muestra en la información sobre herramientas cuando se desplaza sobre la cadena.

<a href="" class="copy-click"

 data-tooltip-text="Click To Copy"


data-tooltip-text-copied="✔ Copied">

 Text Here
</a>

El núcleo JavaScript para activar la funcionalidad de copiar a portapapeles.

const links = document.querySelectorAll('.copy-click');
const cls = {

copied: 'is-copied',

hover: 'is-hovered' };


const copyToClipboard = str => {

const el = document.createElement('input');

str.dataset.copyString ? el.value = str.dataset.copyString : el.value = str.text;

el.setAttribute('readonly', '');

el.style.position = 'absolute';

el.style.opacity = 0;

document.body.appendChild(el);

el.select();

document.execCommand('copy');

document.body.removeChild(el);
};

const clickInteraction = e => {

e.preventDefault();

copyToClipboard(e.target);

e.target.classList.add(cls.copied);

setTimeout(() => e.target.classList.remove(cls.copied), 1000);

setTimeout(() => e.target.classList.remove(cls.hover), 700);
};

Array.from(links).forEach(link => {

link.addEventListener('click', e => clickInteraction(e));

link.addEventListener('keypress', e => {


if (e.keyCode === 13) clickInteraction(e);

});

link.addEventListener('mouseover', e => e.target.classList.add(cls.hover));

link.addEventListener('mouseleave', e => {


if (!e.target.classList.contains(cls.copied)) {



e.target.classList.remove(cls.hover);


}

});
});

El CSS de ejemplo para la información sobre herramientas.

.copy-click {

position: relative;

padding-bottom: 2px;

text-decoration: none;

cursor: copy;

color: #484848;

border-bottom: 1px dashed #767676;

transition: background-color calc(var(--duration) * 2) var(--ease);
}

.copy-click:after {

content: attr(data-tooltip-text);

position: absolute;

bottom: calc(100% + 6px);

left: 50%;

padding: 8px 16px;

white-space: nowrap;

background-color: white;

border-radius: 4px;

box-shadow: 0 0 0 -12px rgba(0, 0, 0, 0);

pointer-events: none;

-webkit-backface-visibility: hidden;





backface-visibility: hidden;

opacity: 0;

-webkit-transform: translate(-50%, 12px);





transform: translate(-50%, 12px);

transition: box-shadow calc(var(--duration) / 1.5) var(--bounce), opacity calc(var(--duration) / 1.5) var(--bounce), -webkit-transform calc(var(--duration) / 1.5) var(--bounce);

transition: box-shadow calc(var(--duration) / 1.5) var(--bounce), opacity calc(var(--duration) / 1.5) var(--bounce), transform calc(var(--duration) / 1.5) var(--bounce);

transition: box-shadow calc(var(--duration) / 1.5) var(--bounce), opacity calc(var(--duration) / 1.5) var(--bounce), transform calc(var(--duration) / 1.5) var(--bounce), -webkit-transform calc(var(--duration) / 1.5) var(--bounce);
}

.copy-click.is-hovered:after {

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

opacity: 1;

-webkit-transform: translate(-50%, 0);





transform: translate(-50%, 0);

transition-timing-function: var(--ease);
}

.copy-click.is-copied {

background-color: yellow;
}

.copy-click.is-copied:after {

content: attr(data-tooltip-text-copied);
}