<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.copiedtext{
position: absolute;
left: 0; top: 0; right: 0;
text-align: center;
opacity:0;
transform: translateY(-1em);
color: #000;
transition: all .500s;
}
.copied .copiedtext{
opacity: 1;
transform: translateY(-2em);
}
body{
text-align: center;
font-family: sans-serif;
color: #444;
line-height: 1.6;
}
h1{
margin: 1.75em auto 1.25em;
}
textarea,button{
font-size: 1em;
font-family: sans-serif;
}
textarea{
display: block;
width: 300px;
max-width: 100%;
height: 75PX;
background: #f2f2f6;
margin: 2em auto 1.5rem;
border: 1px solid #ddd;
padding: 10px 15px;
resize: vertical;
}
[id="cleared"]{
margin-top: 4em;
}
textarea:focus{
border-color:#8fa423 ;
}
button{
position: relative;
padding: 8px 20px;
border: 0;
font-size: 0.835em;
text-transform: uppercase;
letter-spacing: 0.125em;
font-weight: bolder;
color: #fff;
background: #8fa423;
transition: background .275s;
cursor: pointer;
}
button:hover,
button:focus{
background: #74861a;
}
</style>
<body>
<h2>Copy to clipboard - JavaScript -decode</h2>
<textarea id="to-copy"></textarea>
<button id="copy">Copy in clipboard<span class="copiedtext" area-hidden="true">Copied</span></button>
<textarea id="cleared"
></textarea>
<script type="text/javascript">
const toCopy=document.getElementById('to-copy');
const btnCopy=document.getElementById('copy');
const paste=document.getElementById('cleared');
btnCopy.addEventListener('click',function(){
toCopy.select();
paste.value="";
if(document.execCommand('copy')){
btnCopy.classList.add('copied');
paste.focus();
var temp=setInterval(function(){
btnCopy.classList.remove('copied');
clearInterval(temp);
},600);
}else{
console.info('document.execCommand went wrong .........')
}
return false;
});
</script>
</body>
</html>
Comments
Post a Comment