I am making a basic email signature page that I want to be able to use a 'Copy to Clipboard' button / mand.

I have it working, although instead of pasting a formatted graphic ready for inclusion in outlook or mac mail, it pastes the actual html. e.g.

<table width="100%" cellspacing="0" cellpadding="0" border="0" ...

My code is below and I'd be really grateful for some guidance.

function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).html()).select();
  document.execCommand("copy");
  $temp.remove();
  $("#success").slideDown("slow");
}

<script src=".8.3/jquery.min.js"></script>

<div id="email-signature" style="border-bottom: 1px solid #000; padding: 10px 0; margin-bottom: 10px;"> 

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tbody>

<tr>
<td style="padding: 0 0 5px 0;  font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 17px; color: #000; font-weight: bold;">
Name of Person
</td>
</tr>

<tr>
<td style="padding: 0 0 5px 0;  font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 17px; color: #000; ">
<a href="mailto:[email protected]">[email protected]</a>
</td>
</tr>


<tr>
<td style="padding: 0 0 5px 0; ">
<a href=""><img src=".gif" alt="Name of Business" width="100" height="100"></a>
</td>
</tr>

</tbody>

</table>

</div>

<button onclick="copyToClipboard('#email-signature')">Copy to Clipboard</button>

<div id="success" style="display:none; border: 1px solid red; padding:10px; margin-top: 10px;"><strong>Success</strong></div>

I am making a basic email signature page that I want to be able to use a 'Copy to Clipboard' button / mand.

I have it working, although instead of pasting a formatted graphic ready for inclusion in outlook or mac mail, it pastes the actual html. e.g.

<table width="100%" cellspacing="0" cellpadding="0" border="0" ...

My code is below and I'd be really grateful for some guidance.

function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).html()).select();
  document.execCommand("copy");
  $temp.remove();
  $("#success").slideDown("slow");
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<div id="email-signature" style="border-bottom: 1px solid #000; padding: 10px 0; margin-bottom: 10px;"> 

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tbody>

<tr>
<td style="padding: 0 0 5px 0;  font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 17px; color: #000; font-weight: bold;">
Name of Person
</td>
</tr>

<tr>
<td style="padding: 0 0 5px 0;  font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 17px; color: #000; ">
<a href="mailto:[email protected]">[email protected]</a>
</td>
</tr>


<tr>
<td style="padding: 0 0 5px 0; ">
<a href="http://www.example."><img src="http://www.example./logo.gif" alt="Name of Business" width="100" height="100"></a>
</td>
</tr>

</tbody>

</table>

</div>

<button onclick="copyToClipboard('#email-signature')">Copy to Clipboard</button>

<div id="success" style="display:none; border: 1px solid red; padding:10px; margin-top: 10px;"><strong>Success</strong></div>

• javascript
• jquery
• html

• What do you want to copy? What do you mean by a formatted graphic ready? – Vikasdeep Singh Commented May 28, 2018 at 1:26
• I imagine outlook and mac mail are escaping the html. – Jerinaw Commented May 28, 2018 at 1:37
• @VicJordan When you create a signature, typically you drag and select html from firefox or explorer and paste it into a signature box in an app like outlook. When you do, rather than display the raw html, it displays the pasted information exactly as it displays in outlook (Image / bold / spacing) if that makes sense. – Brandrally Commented May 28, 2018 at 1:39

1 Answer 1

You need to instruct the browser to pass the text in as text/html when the copy event fires. I have reworked your code snippet to include this functionality.

function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).html()).select();
  var str = $(element).html();

  function listener(e) {
         e.clipboardData.setData("text/html", str);
         e.clipboardData.setData("text/plain", str);
         e.preventDefault();
  }
  document.addEventListener("copy", listener);
  document.execCommand("copy");
  document.removeEventListener("copy", listener);

  $temp.remove();
  $("#success").slideDown("slow");
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<div id="email-signature" style="border-bottom: 1px solid #000; padding: 10px 0; margin-bottom: 10px;"> 

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tbody>

<tr>
<td style="padding: 0 0 5px 0;  font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 17px; color: #000; font-weight: bold;">
Name of Person
</td>
</tr>

<tr>
<td style="padding: 0 0 5px 0;  font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 17px; color: #000; ">
<a href="mailto:[email protected]">[email protected]</a>
</td>
</tr>


<tr>
<td style="padding: 0 0 5px 0; ">
<a href="http://www.example."><img src="http://www.example./logo.gif" alt="Name of Business" width="100" height="100"></a>
</td>
</tr>

</tbody>

</table>

</div>

<button onclick="copyToClipboard('#email-signature')">Copy to Clipboard</button>

<div id="success" style="display:none; border: 1px solid red; padding:10px; margin-top: 10px;"><strong>Success</strong></div>

Additional Source: javascript copy rich text contents to clipboard