光标跟随
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();
}