Change the color of text copied to the clipboard from an HTML page
I have white text on a dark background on a website. When a visitor copies this text and pastes it into an HTML-capable word processor (such as an email application), the text is copied in white on white. I adapted this c.bavota solution to change the color of the text and its background, applying the friendly IE9 + changes suggested by KingKongFrog. You can see the effects in this JSBin demo and you can find the complete script below.
This works in Chrome and Safari and Opera on Mac, but doesn't work in the latest Firefox (38.0.1). I have not tested any version of Internet Explorer yet.
With Firefox, if you paste somewhere where the style is ignored (like the address bar of your mail app), then the text will be pasted, so at least something is copied.
Can you suggest changes that might convince Firefox to allow this to work?
EDIT: Do nothing in Firefox. Firefox already does all of this for you, and better. The solution is to disable this script in Firefox and you should be fine.
<!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>
source to share