javascript - 将插入符号(光标)放置在内容可编辑字段中的特定位置 - 单击期间出现问题

Question

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

我有一个 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 元素在两种情况下都是相同的元素。但点击主题标签仍然会失去编辑字段的焦点。我完全不知道为什么会发生这种情况。也许您可以提供任何建议？

更新: 嗯，我的代码一定犯了一些错误，因为这个 simple example我在 Codepen 中制作的效果很好。

Answer 1

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