The motivation for the content editable div would be to allow user input inside a normal div element. Why does it then behave so differently to input element? Mainly I am referring to the addition of a div or a br on line break.

Additionally it does not have a placeholder item. So my question is what is the point of content-editable div? Why would I want to use it at all?


what is the point of content-editable div?

The purpose of a contenteditable element is to provide WYSIWYG capabilities for editing the content and structure of elements within a Web page.

Why does it then behave so differently to input element?

A contenteditable element still has to render like a normal DOM element. To address your particular concern about line breaks, there is no way to express rendered line breaks in HTML without using an element like <br> or <div> (since normal source-code HTML line breaks aren't rendered in the visual page).

You might ask, "Why, then, did the WHATWG (or Microsoft) not simply make contenteditable elements play by different rules from 'normal' elements?" The answer is that a contenteditable element might stop being contenteditable at any time -- the status is toggleable. There is no obvious sensible way to make an element render its internal DOM differently depending on whether it is currently contenteditable or not.

Suppose non-<br> visible line breaks were allowed when the element was in a contenteditable state. When the element switches out of contenteditable mode, should the non-<br> line breaks then vanish? You might conceivably say, "Yes, that's fine!" to such a suggestion, but that flies in the face of the purpose of contenteditable I stated in my first sentence. Having the element change appearance based on its contenteditable state would spoil its usefulness as a WYSIWYG.

|improve this answer|||||
  • Nice answer. Part of my frustration with contentedibale was that I am making a markdown editor and the br spoils it completely. At least I understand the rationale behind it now. Thanks :) – Akshat Jiwan Sharma May 23 '13 at 16:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.