How to make an HTML <div> element editable cross-browser?

javascript html cross-browser contenteditable
Cristian Toma picture Cristian Toma · Jul 27, 2009 · Viewed 57.8k times · Source

Do you know how to make a <div> editable with JavaScript? I'm looking for cross-browser solution.

Something similar to a rich text area, but that uses an editable <iframe>. I need something similar for a <div>.
I don't want to use a replacement textbox.

Answer

Cristian Toma picture Cristian Toma · Jul 27, 2009

I found out how.

You use the contentEditable property of the DOMElement, like so

<div onClick="this.contentEditable='true';">
    lorem ipsum dolor lorem ipsum dolorlorem ipsum dolor
</div>

Related questions

contenteditable, set caret at the end of the text (cross-browser)

output in Chrome: <div id="content" contenteditable="true" style="border:1px solid #000;width:500px;height:40px;"> hey <div>what's up?</div> <div> <button id="insert_caret"></button> I …

Read More
Get the size of the screen, current web page and browser window

How can I get windowWidth, windowHeight, pageWidth, pageHeight, screenWidth, screenHeight, pageX, pageY, screenX, screenY which will work in all major browsers?

Read More
OnChange event handler for radio button (INPUT type="radio") doesn't work as one value

I'm looking for a generalized solution for this. Consider 2 radio type inputs with the same name. When submitted, the one that is checked determines the value that gets sent with the form: <input type="radio" name="myRadios" onchange="handleChange1();" …

Read More