kopíruj do schránky s efektem

by Petr Haluza

HTML

<section>
<div>
  Ahoj<span>123</span>
</div>

<div>
  Nazdar<span>456</span>
</div>
</section>

CSS

section {display:flex}
div {border: 2px solid red; padding:2em; position: relative; min-width:200px }
.copied {background:red}
.hidden {opacity:.25} 

div:after { position:absolute; left: 0; z-index:-1; font-size:.85em; background: red; padding: 5px 10px; white-space: nowrap}

div.copied:after {content: attr(data-clipped); animation: clipboardinfo 1.5s}


@keyframes clipboardinfo {
  0% {bottom: 0 }
  20% {bottom: -2em}
  80% {bottom: -2em}
  100% {bottom: 0 }
}

JavaScript

$('div').click(function() {
  	var $temp = $("<input class='hidden'>");
    $("body").append($temp);
    $temp.val($(this).find("span").text()).select();
    document.execCommand('copy');
    $(this).attr("data-clipped", "Zkopírováno do schránky")
    $(this).addClass("copied").delay(1600).queue(function() {
            $(this).removeClass("copied");
            $(this).dequeue();
        });        
    $temp.remove();
    console.log($(this).find("span").text())
  });