ADVERTISEMENT

Create Copy to Clipboard Using HTML & JavaScript

Telegram Group Join Now

ADVERTISEMENT

Create Copy to Clipboard Using HTML & JavaScript

 
 
Copy to Clipboard Using HTML & JavaScript
Copy to Clipboard Using HTML & JavaScript

 

ADVERTISEMENT

ADVERTISEMENT

Welcome to the Codewithrandom blog. In this blog, we learn how to create Copy to a Clipboard. We use HTML, CSS, and JavaScript for this Copy to Clipboard Project.

I hope you enjoy our blog so let’s start with a basic Html Structure for a Copy to Clipboard.

ADVERTISEMENT

HTML Code For Copy to Clipboard

<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>

There is all the Html Code for the Copy to Clipboard. Now, you can see output without Css and JavaScript. then we write Css Code for Styling and Give Copy to Clipboard functionality using JavaScript.

ADVERTISEMENT

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

Output

 

 

ADVERTISEMENT

Copy to Clipboard Using HTML & JavaScript
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;
}

Now we have completed our Css Section For Copy to Clipboard. Here is our updated output HTML + CSS.

50+ HTML, CSS & JavaScript Projects With Source Code

Output

ADVERTISEMENT

 

ADVERTISEMENT

Copy to Clipboard Using HTML & JavaScript
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

 

Copy to Clipboard Using HTML & JavaScript
Copy to Clipboard Using HTML & JavaScript

 

ADVERTISEMENT

Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)

ADVERTISEMENT

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.

ADVERTISEMENT

Thank you!

ADVERTISEMENT

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.

ADVERTISEMENT

Written by – Code With Random/Anki

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT