What are the consequences of using contentEditable on a textarea?

Question

As you can see, at least on Chrome, the contentEditable attribute seems to be ignored on textarea.

Question A: Is that how it's supposed to work?

Question C: Does using contentEditable on a textarea have any consequences other than proving you're an idiot?

Question D: Why is there no question B? Just kidding, I had a clown for breakfast today. :D

textarea { /* not relevant for the question, only for the demo */
  display: block;
  width: 500px;
}

<textarea contentEditable="true">contentEditable="true"</textarea>
<textarea contentEditable="false">contentEditable="false"</textarea>
<textarea contentEditable="true" readonly>contentEditable="true" readonly</textarea>
<textarea contentEditable="true" disabled>contentEditable="true" disabled</textarea>

Does this answer your question? [What are valid values for the id attribute in HTML?](https://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html) — Protect children of Donbas2014, Apr 09 '21 at 13:08

score 2 · Answer 1 · answered Aug 19 '15 at 17:37

contentEditable has no effect and on textarea, the HTML5 spec is mute about the subject.

contentEditable=false allows to make an element not editable inside another element which is contentEditable=true. The default behavior is to inherit the value of contentEditable so that every children of an editable element is also editable.

You can still delete the non-editable element but not edit it. This is demonstrated in the following snippet.

textarea { /* not relevant for the question, only for the demo */
  display: block;
  width: 500px;
}

<div contentEditable="true">
    <span>Editable span</span> but
    <span contentEditable="false">This one is not</span>
</textarea>

What are the consequences of using contentEditable on a textarea?

1 Answers1