Removing Rich Text Formatting For Copy + Paste? (cross Browser)

I'm not sure whether a Javascript or CSS fix could fix this issue on my site. This seems to only happen with Chrome (not sure about IE, yet). Whenever a user copies text from my As

Solution 1:

.unselectable{
   position:absolute;
   z-index:1;
   color:green;
   -webkit-user-select:none;
}
.selectable{
   position:absolute;
   z-index:2;
   color:rgba(0,0,0,0);
   -webkit-user-select:text;
}

<pclass="unselectable">Lorem</p><pclass="selectable">Lorem</p>

Solution 2:

You can intercept the copy event, get the selection without style, and put that into the clipboard.

document.addEventListener('copy', function(e) {
  const text_only = document.getSelection().toString();
  const clipdata = e.clipboardData || window.clipboardData;  
  clipdata.setData('text/plain', text_only);
  clipdata.setData('text/html', text_only);
  e.preventDefault();
});

Solution 3:

You can use the clippy library https://github.com/mojombo/clippy to add a copy to clipboard button. This can help remove the formatting.

Solution 4:

If you don't want to use Flash, you could try something like this to make it easy to copy the text without formatting:

CSS:

#box {background-color:gray; color:white;width:200px;height:400px;align:center;margin-left:50px;padding:30px}
#copy {position:fixed;top:15px;left:200px;text-decoration:underline}

HTML:

<divid="box"><divid="copy"onclick="selectable('p')">Click to select text</div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lacinia eros et justo pulvinar pulvinar. Pellentesque nec nisl feugiat, cursus lorem sed, venenatis sem. Curabitur vitae commodo ante, a pellentesque ligula. Morbi sit amet tincidunt ipsum. Fusce rutrum massa at velit dignissim accumsan. Donec hendrerit lorem sed leo viverra, vel cursus sapien lobortis. Praesent quis ligula non justo rhoncus placerat eu non leo. Pellentesque vitae congue enim. Quisque eget turp</p></div>

JavaScript:

selectable=function(selector){
    var $elem=$(selector);
    innerHTML=$(selector).html()  ;
    $elem.hide();
    $elem.parent().append($('<textarea />').val(innerHTML).css({height:'400px'}));
    $('textarea').select();
};

The code isn't beautiful, it's just to demonstrate the concept.

JSFIDDLE: http://jsfiddle.net/rXG2G/

Solution 5:

Your question has nothing to do with javascript, html or css.

Pasting text in Word keeps formatting by default. To paste without formatting the user need to right click on the Word document and do a Paste Special....