How to prevent CSS from being pasted in a contenteditable div

Question

I have a contenteditable DIV element, and I don't want to have CSS pasted, basically only it only pastes into innerText, but not innerHTML. I'm not using any library, just pure Javascript. Currently, if I were to copy some CSS text from a site, and then paste it into my div element, the style comes with it as well. I want it so if I were to paste it, the CSS wouldn't come, or make it so the CSS gets overriden by the font / color from a oninput event, that I put for the div element's class. So, how would I do this?

CSS for DIV element:

.mystyle {
    border:4px solid gray;
    background-color: #00000070;
    color: white;
    font-family: 'Courier New', Courier, monospace;
    width: 1245px;
    height: 200px;
    padding: 10px;
    font-size: 14px;
    text-shadow: 3px 3px #3f3f3f;
    text-align: justify;
  }

HTML Snippet:

    <div class="mystyle" contenteditable="true" id="input" 
    oninput='//what to put here?'></div>

Does this answer your question? [Contenteditable allowing only plain text](https://stackoverflow.com/questions/34764304/contenteditable-allowing-only-plain-text) — Asteroids With Wings, Jul 07 '20 at 21:42
Your question is not very clear. Could you provide an example of what text you might paste in? as well as which part of the example text you would want removing? — A Friend, Jul 07 '20 at 21:52
@AFriend It's clear. See https://jsfiddle.net/shjofa37/. OP doesn't want the styling brought in. They want a non-rich-text paste into a contenteditable element. — Asteroids With Wings, Jul 07 '20 at 21:55
@AsteroidsWithWings Agree to disagree I guess. @SomePerson Would a `` not be suitable for you? I understand they can't always be used as an alternative but it depends on your needs, using that instead would resolve your issue. — A Friend, Jul 07 '20 at 22:03
I tried a `` and after a few tweaks to my code and styling, it solved the problem, in the first place, I was originally using `<textarea>`, but I switched to `<div>` (maybe because it didnt support me putting `<span>` (for previews)). `<textarea>` suits my input area perfectly!
This might help: https://stackoverflow.com/questions/58756641/how-to-set-css-properties-to-element-but-not-to-innerhtml — Tyler Lewis, Jul 07 '20 at 22:47

score 5 · Answer 1 · answered Jul 07 '20 at 22:55

5

try this: contenteditable="plaintext-only".
doesn't work for all browsers, but does for Chrome - the only browser that matters... :)

found at: contenteditable - HTML: Hypertext Markup Language | MDN at section "Browser compatibility".

answered Jul 07 '20 at 22:55

iAmOren

2,760
2
11
23

How to prevent CSS from being pasted in a contenteditable div

1 Answers1