Coupon Copy-to-Clipboard

</ head>

</ body>

<!-- COUPON COPY TO CLIPBOARD --> 
<script>
// change SAVE20NOW to whatever coupon or text you want to be copied
$('.coupon-field').val('SAVE20NOW')
                  .prop('readOnly', true)
                  .css( 'cursor', 'text' );

// on .copy-btn click
$('.copy-btn').click(function(){
  // copy the .coupon-field's value
  copyToClipboard($('.coupon-field').val());
  
  // save the .copy-btn's original text
  const origText = $(this).text();
  // save the .copy-btn's original font color
  const origColor = $(this).css('color');
  
  // change the .copy-btn's text
  $(this).text('Copied! 🤙');
  // change the .copy-btn's font color
  $(this).css('color', '#1fbd41');
  
  setTimeout(()=>{ // after a 2 sec setTimeout
    $(this).text(origText); // reset text back to original
    $(this).css('color', origColor); // reset font color back to original
  }, 2000);
});

// define copyToClipboard function
function copyToClipboard(str){
  // Create new element
  const el = document.createElement('textarea');
  // Set value (string to be copied)
  el.value = str;
  // Set non-editable to avoid focus and move outside of view
  el.setAttribute('readonly', '');
  el.style = {position: 'absolute', left: '-9999px'};
  document.body.appendChild(el);
  // Select text inside element
  el.select();
  // Copy text to clipboard
  document.execCommand('copy');
  // Remove temporary element
  document.body.removeChild(el);
}
</script>

HTML/Embed

Only tabs with a " " have code.
<!-- COUPON COPY TO CLIPBOARD --> 
<script>
// change SAVE20NOW to whatever coupon or text you want to be copied
$('.coupon-field').val('SAVE20NOW')
                  .prop('readOnly', true)
                  .css( 'cursor', 'text' );

// on .copy-btn click
$('.copy-btn').click(function(){
  // copy the .coupon-field's value
  copyToClipboard($('.coupon-field').val());
  
  // save the .copy-btn's original text
  const origText = $(this).text();
  // save the .copy-btn's original font color
  const origColor = $(this).css('color');
  
  // change the .copy-btn's text
  $(this).text('Copied! 🤙');
  // change the .copy-btn's font color
  $(this).css('color', '#1fbd41');
  
  setTimeout(()=>{ // after a 2 sec setTimeout
    $(this).text(origText); // reset text back to original
    $(this).css('color', origColor); // reset font color back to original
  }, 2000);
});

// define copyToClipboard function
function copyToClipboard(str){
  // Create new element
  const el = document.createElement('textarea');
  // Set value (string to be copied)
  el.value = str;
  // Set non-editable to avoid focus and move outside of view
  el.setAttribute('readonly', '');
  el.style = {position: 'absolute', left: '-9999px'};
  document.body.appendChild(el);
  // Select text inside element
  el.select();
  // Copy text to clipboard
  document.execCommand('copy');
  // Remove temporary element
  document.body.removeChild(el);
}
</script>
Only tabs with a " " have code.
Only tabs with a " " have code.
Author
Milan Kyncl
Published
May 24, 2021

How to use:

Tutorial Coming Soon!

Check Browser Support

Interactive Table

This simple yet awesome jquery plugin will allow us to copy a coupon code (or any content you want) to our clipboard to use later somewhere else.

Clone Project
Documentation
Author:
Built by
Built with
For the best experience

Please switch to desktop to view the content.

Back Home
Thank you! Your submission has been received!
Close Form
Oops! Something went wrong while submitting the form.
Become a Contributor