I need a way to copy text to the clipboard and show an alert confirming that it was copied successfully.
When the user clicks/touches the coupon PRIMEIRACOMPRA, the text "cupom copiado" changes its opacity to 1 and runs an animation to hide it.
UPDATE: After fixing a cache issue, I noticed that the animation doesn't work a second time. It should reset the opacity to 1 on every button click, but it's not happening. What could be causing this?
Here is the script I'm using:
function copyCupom() {
var copyText = document.querySelector(".offer-right__coupon input");
copyText.select();
copyText.setSelectionRange(0, 99999); // For mobile devices
navigator.clipboard.writeText(copyText.value);
var textwascopied = document.querySelector(".offer-right__main .alert-coupon");
textwascopied.style.opacity = "1";
textwascopied.style.webkitAnimation = "hideText 1s ease-in 2s";
}
And the corresponding CSS:
.offer-right__main .alert-coupon {
opacity: 0;
animation-fill-mode: forwards !important;
transition: 1s all;
}
@-webkit-keyframes hideText {
to {
opacity: 0;
}
}
The function is triggered by clicking on the coupon button, and it works well on desktop but not on mobile!
<button onclick="copyCupom()">
What am I missing here?
The message "Cupom copiado" indicating that the text was copied does not disappear on mobile devices. I tried adding a webkit animation with no luck.
textwascopied.style.webkitAnimation = "webkit-hideText 1s ease-in 2s";
textwascopied.style.animation = "hideText 1s ease-in 2s";
@-webkit-keyframes webkit-hideText {
to {
opacity: 0;
}
}
@keyframes hideText {
to {
opacity: 0;
}
}