Solution of “Surprising developers”

1. p.contentEditable=false;

It sets p.contentEditable to string "false"
p.isContentEditable is set to boolean false.
p‘s attribute contenteditable to false
The element cannot be edited after the assignment (but deleted
if the parent element is editable). So it does what you usually would
expect.

2. p.contentEditable=!p.contentEditable;

This one is a bit tricky and might easily trap fast developers. You may think it toggles p.contentEditable. But it does not. It does exactly the same as the first example above:
It sets p.contentEditable to "false" etc. No matter what the value of p.contentEditable is.
p.contentEditable is always a nonempty string namely either "true" or "false" or "inherit".
(!non-empty-string) is always boolean false. Which will be casted to string "false" when assigned to p.contentEditable.

3. p.contentEditable=!p.isContentEditable;

This is the correct way to toggle.

Bonus： document.designMode = true;

Does nothing. Is ignored. Only "off" and "on" are recognized.
Other than this: p.contentEditable = "on" would throw an error.

Consistency? Not invented here!

0 Comments