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.
1