Copy to clipboard javascript

CSS Section:

/*-- clipboard and copy button --*/

.copy-1{

width: 100%;

height:200px;

    border: 1px solid #ffd40082;

    border-radius: 5px;

    background: #fbb9000d;

}

.copybtn-1{

    background: #e9f442b0;

    cursor: pointer;

    height: 30px;

    border-radius: 5px;

    color: blue;

    border: 1px solid lightgrey;

}

.copybtn-1:hover{

    background: #76f44280;

}

HTML Section:

<textarea class="copy-1">

Text Here

</textarea>

<br />

<button class="copybtn-1">Copy Link</button>

Javascript Section:

            <!-- copy TEXT to clipboard --> 

<script type='text/javascript'>

var copyTextareaBtn = document.querySelector('.copybtn-1');

copyTextareaBtn.addEventListener('click', function(event) {

  var copyTextarea = document.querySelector('.copy-1');

  copyTextarea.focus();

  copyTextarea.select();

  try {

    var successful = document.execCommand('copy');

    var msg = successful ? 'successful' : 'unsuccessful';

    console.log('Copying text command was ' + msg);

  } catch (err) {

    console.log('Oops, unable to copy');

  }

});

</script>

Live Preview

For Blogger Javascript Section:

            <!-- copy TEXT to clipboard --> 

<script type='text/javascript'>

   //<![CDATA[

var copyTextareaBtn = document.querySelector('.copybtn-1');

copyTextareaBtn.addEventListener('click', function(event) {

  var copyTextarea = document.querySelector('.copy-1');

  copyTextarea.focus();

  copyTextarea.select();

  try {

    var successful = document.execCommand('copy');

    var msg = successful ? 'successful' : 'unsuccessful';

    console.log('Copying text command was ' + msg);

  } catch (err) {

    console.log('Oops, unable to copy');

  }

});

//]]>

</script>

Shortcut Method:

<textarea id="textarea-1" readonly>

 Add TEXT Here

</textarea>

<button id="button-1">Copy Text</button>

  <script>

  // HTML BOx JS Code

    let TextBox = document.getElementById("textarea-1");

    let CopyButton = document.getElementById("button-1");

    CopyButton.onclick = function() {

      TextBox.select();

      document.execCommand("copy");

      CopyButton.innerText = "Codes Copied"

    }

  </script>