Un-editable sections inside of a content editable

16 November 2022

Updated: 03 September 2023

I was working on an EditorJS plugin and needed to have a way of creating a block that would restrict certain user interactions

Initially, I tried to make use of event listeners to block the undesirable events, but the behavior on mobile was inconsistent and I wanted to avoid the mobile keyboard popping up as well when needed

In addition to the above, I also noticed that even when blocking the events using JavaScript, though the debugger didn’t register the event, the user was still able to make changes to the sections being blocked

The solution proved to be fairly simple, though only tested on chrome so it may not be robust.

In my case, what worked was the following:

1
<div contenteditable="true">
2
  <div contenteditable="false">
3
    I should be uneditable, and on mobile won't even trigger a keyboard popup
4
  </div>
5
</div>

Now, more generally, we can have other editable content while still having uneditable sections

1
<div contenteditable="true">
2
  I continue to be editable
3

4
  <div contenteditable="false">
5
    But I should be uneditable, and on mobile won't even trigger a keyboard
6
    popup
7
  </div>
8
</div>