更改从 HTML 页面复制到剪贴板的文本颜色答案

【问题标题】：Changing the colour of text copied to the clipboard from an HTML page更改从 HTML 页面复制到剪贴板的文本颜色
【发布时间】：2015-08-08 12:23:32
【问题描述】：

我在网站上的深色背景上有白色文本。当访问者复制此文本并将其粘贴到支持 HTML 的文字处理器（如电子邮件应用程序）中时，文本将被白底白字地复制。我已经改编了 c.bavota 的 this solution 来更改文本及其背景的颜色，应用 KingKongFrog 建议的 an IE9+ friendly change。你可以在这个JSBin 演示中看到效果，你可以在下面找到完整的脚本。

这适用于 Mac 上的 Chrome、Safari 和 Opera，但不适用于最新的 Firefox (38.0.1)。我还没有在任何版本的 Internet Explorer 上进行测试。

在 Firefox 中，如果您粘贴到样式被忽略的位置（例如电子邮件应用程序的地址栏），则文本将被粘贴，因此至少会复制一些内容。

您能否提出一些更改，以说服 Firefox 也允许这项工作？

编辑：在 Firefox 上什么也不做。 Firefox 已经为您完成了这一切，而且做得更好。解决方案是在 Firefox 上禁用此脚本，一切都会好起来的。

<!DOCTYPE html>
<html>
<head>
<style>
html, body{
height: 100%;
margin: 0; 
color: #fff;
font-size: 32px;
background: #000;
}

div {
height: 100%;
}

span::selection {
color: #000;
background: #FFF;
}

span::-moz-selection {
color: #000;
background: #FFF;
}

.copy {
color: #000;
background: #FFF;
}
</style>


</head>
<body>
  <div>
    <p>
      <span>Select, then copy and paste this text </span>
      into an HTML aware word processor.
    </p>
  </div>

  <script>
  function blackOnWhite() {
    if (/mozilla/.test(navigator.userAgent.toLowerCase()) && !/webkit/.test(navigator.userAgent.toLowerCase()) {
      return;
    }
    var body = document.getElementsByTagName('body')[0];
    var selection = window.getSelection();
    var more = "<br /><br />More text"; // change this
    var copyDiv = document.createElement('div');
    copyDiv.style.position='absolute';
    copyDiv.style.left='-99999px';
    body.appendChild(copyDiv);
    copyDiv.innerHTML = selection + more;
    copyDiv.classList.add("copy");
    selection.selectAllChildren(copyDiv);
    window.setTimeout(function() {
      body.removeChild(copyDiv);
    },1);
  }
  document.body.oncopy = blackOnWhite;
  </script>
</body>
</html>

【问题讨论】：

标签： javascript css firefox copy-paste

【解决方案1】：

在 Mac 上，您可以使用 ⇧⌥⌘V 粘贴未格式化的内容。

【讨论】：