CODEWITHSUNDEEP
javascripthtml
SomePerson
SomePerson

Reputation: 1309

How to prevent CSS from being pasted in a contenteditable div

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>

Upvotes: 3

Views: 1317

Answers (1)

iAmOren
iAmOren

Reputation: 2804

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

Upvotes: 6

Related Questions