我正在制作一个基本的电子邮件签名页面,我希望能够使用“复制到剪贴板”按钮/命令。
我让它正常工作,尽管它粘贴的不是准备好包含在outlook或mac邮件中的格式化图形,而是实际的html。例如:
<table width="100%" cellspacing="0" cellpadding="0" border="0" ...
我的代码如下,如果能得到一些指导,我将不胜感激。
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.com/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@example.com">email@example.com</a>
</td>
</tr>
<tr>
<td style="padding: 0 0 5px 0; ">
<a href="http://www.example.com"><img src="http://www.example.com/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>
发布于 2018-05-28 10:43:24
您需要指示浏览器在触发copy
事件时将文本作为text/html
传入。我重新编写了您的代码片段,以包含此功能。
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.com/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@example.com">email@example.com</a>
</td>
</tr>
<tr>
<td style="padding: 0 0 5px 0; ">
<a href="http://www.example.com"><img src="http://www.example.com/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>
https://stackoverflow.com/questions/50558013
复制相似问题