Removing rich text formatting for copy + paste? (Cross Browser)

Question

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 AspDotNetStorefront site and paste it onto a Word document, the pasted text includes a gray background. Is there anything I can do on my site to prevent this rich text formatting paste feature onto documents?

I'm not sure what would be the cause of this besides Microsoft Word's default paste setting.

typically, right-click "paste as plain text", or [ctrl]+[shift]+[V] does that. you can also convert to plain text by pasting then cutting in notepad first. — dandavis, Jul 18 '14 at 18:58
Thanks :) But I was trying to figure out a way where the user wouldn't have to do any of that stuff. — amyton, Jul 18 '14 at 19:13

score 1 · Answer 1 · answered Jan 19 '15 at 12:49

.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;
}

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

score 1 · Answer 2 · answered May 15 '19 at 20:58

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();
});

score 0 · Answer 3 · answered Jul 18 '14 at 18:19

0

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

answered Jul 18 '14 at 18:19

Pim

608
1
6
17

score 0 · Answer 4 · answered Jul 18 '14 at 18:52

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:

<div id="box">
    <div id="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/

score -1 · Answer 5 · answered Jul 18 '14 at 18:19

-1

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....

answered Jul 18 '14 at 18:19

Nathan Boiron

67
1
3

1

Not necessarily. I'm trying to figure out a way where the user wouldn't have to go through those steps (I'm thinking about those users who wouldn't know how to paste special). I want to handle it on my side, whether I could use something like `::selection` – amyton Jul 18 '14 at 19:15
In that case you could use a copy to clipboard button like Pim suggested. And when the user clicks it, you can copy a version of the text without the formatting. – Nathan Boiron Jul 21 '14 at 13:35

Removing rich text formatting for copy + paste? (Cross Browser)

5 Answers5

Linked