Responsive Ad Slot

Copy to clipboard javascript

Monday, January 17, 2022

/ by Admin

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>

No comments

Post a Comment

Leave with comments

Don't Miss
© all rights reserved
made with by templateszoo