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

标签 javascript css firefox copy-paste

我在网站上的深色背景上有白色文本。当访问者复制此文本并将其粘贴到可识别 HTML 的文字处理器(如电子邮件应用程序)中时,文本将复制为白底白字。我已经适应了 this solution通过 c.bavota 更改文本及其背景的颜色,应用 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>

最佳答案

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

关于javascript - 更改从 HTML 页面复制到剪贴板的文本颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30465138/

相关文章:

javascript - 自定义 Joomla 3.x 标签页

javascript - CSS/JavaScript : How do I hide the vertical scroll bar?

c++ - 将 NPAPI 插件与 FFmpeg 链接使 Firefox 无法加载插件

javascript - window.addEventListener 不工作但 window.onhashchange 工作?

javascript - 如何在 JSF 上使用 Markdown 编辑器 - Primefaces

python - 如何在 Django 中自动向所有表单小部件添加类属性?

firefox - 在 Firefox 中拖动引导 slider handle 时阻止文本选择

javascript - 减少 Plotly.js 库的大小

javascript - 空 C :\fakepath\. 。 IE 中的文件上传

css - 知道如何在 Firefox 和 IE 上使用可用的 webkit 填充吗?