What are the cons of using a contentEditable div rather than a textarea?

JavascriptHtmlCssContenteditable

Javascript Problem Overview

Would I be shooting myself in the foot by using a div with attribute contentEditable="true" as a text field rather than a textarea?

Javascript Solutions

Solution 1 - Javascript

It would work fine, but it'd be a little bit more difficult than a form, simply because you're going to have to wire up your own logic to make the button's click event track down the correct div, get its content, and then perform the submission. The advantage of a textarea is that the browser takes care of all that for you.

Solution 2 - Javascript

It's not the same thing. First semantically, the purpose of a textarea is to write/edit plain text whereas with contentEditable you can edit list for instance (see: htmldemo) Second the behavior is also different. For example, in chrome when you test the link below and that you delete all the content you loose the focus (the div element disappear) which is not the expected behavior, or if it is it's idiot.

Solution 3 - Javascript

The Gmail's mail edit box is also a div with contenteditable="true". The major benefit is it has auto-adjust height as user input text/content. Also it supports rich text inside. You can mimic the Textarea by setting a max height if need.

On the other hand if you want auto height in Textarea, you might have to use js to bind some listener to the oninput hook.

Solution 4 - Javascript

In divs with contenteditable="true" the content can be html formatted, e.g. text with different colors. See also https://stackoverflow.com/a/40898337/11769765.

Categories
Recommended Javascript Solutions
Recommended Html Solutions
Recommended Css Solutions
Recommended Contenteditable Solutions

Previous Solution:

Import statement inside class/function definition - is it a good idea?

PythonFunctionClassImport

Next Solution:

Android BroadcastReceiver on startup - keep running when Activity is in Background

AndroidBroadcastreceiver

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionBabikerView Question on Stackoverflow
Solution 1 - JavascriptTMLView Answer on Stackoverflow
Solution 2 - JavascriptgrandouassouView Answer on Stackoverflow
Solution 3 - JavascriptLeOn - Han LiView Answer on Stackoverflow
Solution 4 - JavascriptFriedrichView Answer on Stackoverflow