javascript - 禁止 HTML anchor 标记内插入符号

Question

我有一个 contenteditable 段落，其中包含多个 anchor 标记，如下所示。每个 anchor 标记都包含带方括号的文本。假设管道是插入符号:

<p contenteditable='true'>This is some <a>[text]|</a>. Here is some <a>[more]</a></p>

用户输入按键后，如何检测插入符号是否位于左侧的结束方括号和右侧的结束 anchor 标记之间，如果是，则将其移动到结束 anchor 标记的右侧防止输入 anchor 标记。

我已经浏览了大约六篇帖子，其中包括这个:contenteditable put caret outside inserted span

但是它们都不能满足我的特定需求。提前致谢。

Answer 1

将 anchor 设置为不可内容编辑，这样用户将无法编辑其中的文本。 (但是他们可以删除它)

<p contenteditable='true'>This is some <a contenteditable="false">[text]</a>. Here is some <a contenteditable="false">[more]</a></p>

并允许他们仅编辑其中的文本

<p contenteditable='true'>This is some <a contenteditable="false">[<span contenteditable='true'>text</span>]</a>. Here is some <a contenteditable="false">[<span contenteditable='true'>more</span>]</a></p>