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?
Best Answer
The purpose of a
contenteditableelement is to provide WYSIWYG capabilities for editing the content and structure of elements within a Web page.A
contenteditableelement 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
contenteditableelements play by different rules from 'normal' elements?" The answer is that acontenteditableelement might stop beingcontenteditableat 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 currentlycontenteditableor not.Suppose non-
<br>visible line breaks were allowed when the element was in acontenteditablestate. When the element switches out ofcontenteditablemode, 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 ofcontenteditableI stated in my first sentence. Having the element change appearance based on itscontenteditablestate would spoil its usefulness as a WYSIWYG.