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

Solution 1:

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>

Solution 2:

You can do this in pure HTML

<div class="editable" contenteditable="true">
    Editable text...
</div>

Hope this helps!

Solution 3:

Set contentEditable property of the element to "true":

element.contentEditable = "true";

See also:

  • Content Editable MDN docs
  • Browser support on caniuse.com