Create Copy to Clipboard Using HTML & JavaScript

 

<h1>Copy in Clipboard with JavaScript</h1>
<textarea id="to-copy" spellcheck="false">
Write something and copy it into your clipboard by clicking in the button below.</textarea
>
<button id="copy" type="button">
    Copy in clipboard<span class="copiedtext" aria-hidden="true">Copied</span>
</button>
<textarea
    id="cleared"
    placeholder="Paste your copied content here. Just to test…"
></textarea>

 

output

CSS Code For Copy to Clipboard

 /* Just to play with animations */
.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);
}
/* Some Generic styles */
body {
text-align: center;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
color: #444;
line-height: 1.6;
}
h1 {
margin: 1.75em auto 1.25em;
}
textarea,
button {
font-size: 1em;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
textarea {
display: block;
width: 300px;
max-width: 100%;
height: 75px;
margin: 2em auto 1.5em;
background: #F2F2F6;
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: bold;
color: #FFF;
background: #8fa423;
transition: background .275s;
}
button:hover,
button:focus {
background: #74861A;
}

 

output

 

Now we add javascript code for a copy to clipboard using some javascript function so when the user clicks on copy and the whole Textarea text copy so let’s start javascript code.

Javascript For Copy to Clipboard

var toCopy = document.getElementById( 'to-copy' ),
btnCopy = document.getElementById( 'copy' ),
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;
} );

Final Output Of Copy to Clipboard Using HTML & JavaScript

 

 

Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)

Now we have completed Copy to Clipboard. Here is our updated output with Html, Css, and JavaScript. Hope you like Copy to Clipboard Project. You can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

Thank you!

In this post, we learn how to Create Copy to Clipboard Using HTML & JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki