Copy to clipboard javascript | how to copy to clipboard javascript
Welcome🎉 to Code With Random blog. In this blog, we learn that how we how to create copy to clipboard javascript. We use HTML & CSS and javascript for this copy to clipboard javascript. Hope you enjoy our blog so let's start with a basic HTML structure for a copy to clipboard javascript.
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 HTML code for the copy to clipboard. Now, you can see output without CSS, then we write CSS for our copy to clipboard.output
/* 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;
}
Javascript project ideas with complete source code
Now we have completed our CSS section, Here is our updated output CSS.
output
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;
} );
outputCheck it more
Now we have completed our css section, Here is our updated output with javascript. Hope you like copy to clipboard javascript, you can see 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 a copy to clipboard javascript using simple HTML & CSS and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Post a Comment