将插入符号（光标）放置在内容可编辑字段中的特定位置 - 单击期间的问题答案

【问题标题】：Placing the caret (cursor) in a specific position in a contenteditable field — problems during click将插入符号（光标）放置在内容可编辑字段中的特定位置 - 单击期间的问题
【发布时间】：2016-01-17 18:24:37
【问题描述】：

这是我面临的一个奇怪问题。

我有一个contenteditable 字段，并为它实现了标签的自动完成功能。当用户开始输入主题标签时，他们会看到一个带有自动完成建议的弹出框，如下所示：

用户可以使用键盘（使用向上/向下箭头选择它并按 Enter）或单击它来插入建议的主题标签。将插入主题标签，并将光标放在主题标签的末尾，具有以下功能：

/*
 * The function takes a DOM node and the desired caret position
*/
var setCaretPosition = function(node, position) {
    node.focus();
    var textNode = node.firstChild;
    var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(textNode, position);
    range.setEnd(textNode, position);
    sel.removeAllRanges();
    sel.addRange(range);
};

现在，这是我的问题。如果用户通过键盘选择主题标签（使用箭头并按 Enter），则上述功能可以正常工作。但是，如果用户单击主题标签，则会插入主题标签，但焦点会从文本编辑字段中丢失。

我单步调试了调试器并验证了我试图关注并设置光标的 DOM 元素在两种情况下都是相同的元素。但是单击主题标签仍然会失去对编辑字段的关注。我完全不知道为什么会发生这种情况。或许您可以提出一些建议？

更新：嗯，我的代码一定是出错了，因为我在 Codepen 中创建的 simple example 工作正常。

【问题讨论】：

标签： javascript contenteditable caret

【解决方案1】：

在无数次重新阅读我的代码后，我意识到当我单击主题标签上的 mousedown 事件时，我正在调用 stopPropagation，而不是 preventDefault。因此，焦点从我的文本字段中丢失也就不足为奇了。我仍然觉得它没有用我的问题中包含的代码 sn-p 恢复有点令人费解，但也许那是因为我正在听主题标签上的 mousedown 事件和焦点，即使它恢复到文本字段一小会儿，又迷路了。

【讨论】：