Skip to content

光标跟随

javascript
/**
 * 获取元素的最后一个文本节点,并去除其尾部空白字符。
 *
 * @param element - DOM 元素
 * @returns 最后一个文本节点或 null
 */
getLastTextNode(element: Element) {
  const children: any[] = Array.from(element.childNodes);
  for (let i = children.length - 1; i >= 0; i--) {
    const node = children[i];
    if (node.nodeType === Node.TEXT_NODE && /\S/.test(node.nodeValue)) {
      node.nodeValue = node.nodeValue?.replace(/\s+$/, '');
      return node;
    } else if (node.nodeType === Node.ELEMENT_NODE) {
      const last: any = this.getLastTextNode(node);
      if (last) {
        return last;
      }
    }
  }
  return null;
}

/**
 * 更新光标位置。
 *
 * @param element - DOM 元素
 */
updateCursor(element: Element) {
  const lastText = this.getLastTextNode(element);
  const textNode = document.createTextNode('\u200b'); // 零宽空格字符
  if (lastText) {
    lastText.parentElement.appendChild(textNode);
  } else {
    element.appendChild(textNode);
  }
  const domRect = element.getBoundingClientRect();
  const range = document.createRange();
  range.setStart(textNode, 0);
  range.setEnd(textNode, 0);
  const rect = range.getBoundingClientRect();
  this.pos.x = rect.left - domRect.left;
  this.pos.y = rect.top - domRect.top;
  textNode.remove();
}