CODEWITHSUNDEEP
javascripthtmlcssaspdotnetstorefront
amyton
amyton

Reputation: 31

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

Upvotes: 3

Views: 5424

Answers (5)

Laizer
Laizer

Reputation: 6150

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

Upvotes: 1

nexus6
nexus6

Reputation: 23

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

Upvotes: 1

Max Heiber
Max Heiber

Reputation: 15502

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/

Upvotes: 0

Nathan Boiron
Nathan Boiron

Reputation: 67

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

Upvotes: -1

Pim
Pim

Reputation: 598

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

Upvotes: 0

Related Questions