禁止 HTML 锚标记中的插入符号答案

【问题标题】：Disallow Caret inside HTML anchor tags禁止 HTML 锚标记中的插入符号
【发布时间】：2016-01-27 17:09:38
【问题描述】：

我有一个包含多个锚标记的contenteditable 段落，如下所示。每个锚标记都包含带有方括号的文本。假设 Pipe 是插入符号：

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

在用户键入一个键后，我如何检测插入符号是否在左侧的右方括号和右侧的结束锚标记之间，如果是，将其移动到结束锚标记的右侧防止输入锚标记。

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

但是，它们都没有满足我的特定需求。提前致谢。

【问题讨论】：

标签： javascript html contenteditable

【解决方案1】：

将锚点设置为不可编辑，用户将无法编辑其中的文本。（但是他们可以删除它）

&lt;p contenteditable='true'&gt;This is some &lt;a contenteditable="false"&gt;[text]&lt;/a&gt;. Here is some &lt;a contenteditable="false"&gt;[more]&lt;/a&gt;&lt;/p&gt;

并允许他们只编辑里面的文本

&lt;p contenteditable='true'&gt;This is some &lt;a contenteditable="false"&gt;[&lt;span contenteditable='true'&gt;text&lt;/span&gt;]&lt;/a&gt;. Here is some &lt;a contenteditable="false"&gt;[&lt;span contenteditable='true'&gt;more&lt;/span&gt;]&lt;/a&gt;&lt;/p&gt;

【讨论】：

所以您只希望[] 中的文本可编辑？ @TripleC
所以你需要嵌套它们！必须喜欢所有额外的 html 标记。 :)
整个锚标签及其内容都是可编辑的。我只想禁止光标位于文本“]”和 html ` 之间。发生的事情是我正在编辑段落，有时我在右方括号后输入并获得不同的样式，因为光标在技术上位于锚标记“内部”。
这就是上面第二个示例中的代码所做的。您可以更改 [ 和 ] 之间的任何文本，但不能在 [ 和 ] 之前输入文本。
括号也是可编辑的。正如我之前所说，“整个锚标记及其内容都需要可编辑。”