There are several questions about asking how to make a div editable. However one could just use a textarea or input field and make those disabled or readonly. I would guess this would yield better semantics. Even the example given at MDN looks like a plain old input field to me.
So why would I use an editable div? What are its advantages over textareas and input fields?
I just had a look at an example I found in the tag wiki contenteditable.
Is the advantage, that I can use markup inside an editable div, but not inside a textarea or an input field? Wouldn't it then be more semantically correct to allow children to a textarea. Or introduce a whole new element like they did a lot with HTML5. Something like richtextarea?
Your theorical "richtextarea" doesn't exist, so when people want to allow the users to write content including formatting, tables, images, etc... they must use what is available and that's an element with contentEditable.
Of course, if you look at a plain "contentEditable" element it will be boring, so you must look at a full featured editor like CKEditor or TinyMCE that provides a full interface built upon this feature.
来源：https://stackoverflow.com/questions/28360863/why-would-one-choose-an-editable-div-over-an-input-or-textarea