Introduction

This example shows:

  1. `contenteditable="false"` may cause the user selection into the node with offset 0.
  2. `user-select: none` forbids the user selection into the `contenteditable="false"` nodes.
  3. `contenteditable="true"` inside a `contenteditable="false"` and `user-select: none` node will still cause the user selection into the node with offset 0.
  4. JavaScript codes can enfore the selection into the user-unselectable nodes.
  5. If some JavaScript codes selects into the not-contenteditable nodes, an user click on the selection will reset the selection into a proper one.

DOM Structure

div[contenteditable="true"]
  p[id="content-editable"] (contenteditable="true")
  div[id="table-wrapper"]
    p (Loading or Status)
    table
  p (cell index)

Example

contenteditable="true"

Loading...

1

2

3

4

Something after the table

Buttons

Console