在ContentEditable中,如何获得插入符号前面的元素的引用？

Question

我正在尝试编写一个函数,该函数将keyup在contentEditable div中为插入符号前面的元素提供引用.

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

但是如果插入符号位于文本节点的开头,并且此文本节点前面紧跟一个元素(如Span),则该函数应返回对此元素的引用.

并且,如果插入符号位于两个Html元素之间(例如,在两个Spans之间),则它应该返回对插入符号之前的元素的引用,即两个元素中的第一个.

如果有两个或多个文本节点紧跟在一起,则应将它们视为单个文本节点.

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

Answer 1

这可以使用锚节点来完成.锚节点是光标所在的节点.我们可以使用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也是类似的.你现在可以使用这些和代码来满足你的需求.