copy to clipboard javascript | how to copy to clipboard javascript

 copy to clipboard javascript | how to copy to clipboard javascript





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

copy to clipboard javascript | how to copy to clipboard javascript
output

CSS for copy to clipboard javascript

 /* 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
copy to clipboard javascript | how to copy to clipboard javascript
output

Now add javascript for the copy to clipboard!

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;  
 } );  
output

copy to clipboard javascript | how to copy to clipboard javascript

Check it more







Now we have completed our css section,  Here is our updated output with javascriptHope 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.

Written by - Code With Random/Anki 

Post a Comment

Previous Post Next Post