1

我正在尝试编写一个函数，该函数将在 上keyup为我提供对 contentEditable div 中插入符号之前的元素的引用。

如果插入符号在文本节点中，则该函数应返回null. 如果插入符号位于 contentEditable 的开头，则该函数应返回null。

但是，如果插入符号位于文本节点的开头，并且该文本节点之前紧跟一个元素（例如 Span），则该函数应返回对该元素的引用。

并且，如果插入符号放置在两个 Html 元素之间（例如，在两个 Span 之间），那么它应该返回对插入符号之前的元素的引用，即两个元素中的第一个。

如果有两个或多个文本节点紧接在一起，则应将它们视为单个文本节点。

我已经开始拼凑一些东西了。我正在考虑使用范围偏移来计算我在文本节点中的距离，但感觉过于复杂。我不禁想到有一些明显的事情我没有想到。

4

1 回答 1

8

这可以使用锚节点来完成。锚节点是光标所在的节点。我们可以使用 previousSibling 属性获取它之前的元素。这是我们如何做到的

 var selection
 if (window.getSelection)
  selection = window.getSelection();
 else if (document.selection && document.selection.type != "Control")
  selection = document.selection;

var anchor_node = selection.anchorNode; //current node on which cursor is positioned
var previous_node = anchor_node.previousSibling;
var next_node = anchor_node.nextSibling;

previous_node.nodeName 对于 textnode 将是 '#text'，对于 span 节点将是 'span'。这对于 next_node 也是类似的。您现在可以使用这些和代码来满足您的要求。

于 2013-07-04T11:45:59.767 回答