Pasting to contentEditable Div inserts other HTML automatically.

Question

I'm using a div with the contentEditable attribute to meet my need as a simple, cross-browser solution to expanding text-fields, but I've encountered an interesting problem.

Here's the div :

<div id="expanderInput" class="inputDiv" contentEditable></div>

Here's where I grab it in jquery :

var forwardsTo = $expanderInput.html();

In most cases, this returns whatever the user has typed into the div, but odd things happen when they start pasting things there.

For example, when you paste from Word, it will display the text properly in the browser, but it adding extra html code inside the div. When I paste in an email address such as '[email protected]' from word, here is the code it is really inserting into the html :

<P style="MARGIN: 0in 0in 10pt" class=MsoNormal><FONT size=3><FONT face=Calibri>[email protected]<o:p></o:p></p>

This creates a problem when trying to get the simple text the user pasted in, as it also grabs the html code, making it hard to parse out correctly.

Is there a way to limit what a user can paste into the div? Or just make it so only simple text can be inserted?

Answer 1

How about grabbing the .text() only?

var forwardsTo = $expanderInput.text();

It's not a perfect solution, since your user thinks he may paste bold/italic text and discovers after submission that that markup has been stripped. Maybe you can apply

$expanderInput.text($expanderInput.text());

upon each paste event. This will strip markup immediately.