在 contenteditable div 中获取光标位置

在 web 开发中，我们经常需要在 contenteditable 的 div 中获取光标的位置，以实现一些文本编辑的功能。但是，由于 contenteditable div 中的光标位置并不是一些标准的 DOM 属性或方法，所以有时候需要采取一些特殊的方法来获取光标位置。本文将介绍在 contenteditable div 中获取光标位置的一些方法。

通过 Selection 对象获取光标位置

在 contenteditable div 中，我们可以通过 window.getSelection() 方法获取当前文档的 Selection 对象，然后使用 Selection 对象的一些属性和方法获取光标位置。

let selection = window.getSelection();
let range = selection.getRangeAt(0);
let position = range.startOffset;

上面的代码中，首先通过 window.getSelection() 方法获取 Selection 对象，然后使用 Selection 对象的 getRangeAt() 方法获取当前选中的范围，再使用 Range 对象的 startOffset 属性获取光标在范围内的位置。

这种方法的好处是比较简单直接，而且可以获取到相对于 contenteditable div 内部的位置，所以比较适合实现一些针对具体文本内容的编辑功能。

通过 range.getBoundingClientRect() 获取光标位置

在 contenteditable div 中，我们也可以通过获取当前选中范围的位置，计算出光标在 div 中的位置。

let selection = window.getSelection();
let range = selection.getRangeAt(0);
let rect = range.getBoundingClientRect();
let position = {
  x: rect.left + window.scrollX, 
  y: rect.top + window.scrollY
};

上面的代码中，我们使用 Range 对象的 getBoundingClientRect() 方法获取当前选中范围在页面中的位置，然后通过计算出该位置相对于 contenteditable div 的位置，得到光标的位置。

这种方法的好处是可以获取到相对于页面的绝对位置，所以比较适合实现一些针对页面布局的编辑功能。

通过 document.getSelection() 获取光标位置

在一些老的浏览器中，可能无法使用 window.getSelection() 方法获取 Selection 对象，我们可以尝试使用 document.getSelection() 方法。

let selection = document.getSelection();
let range = selection.getRangeAt(0);
let position = range.startOffset;

这种方法和第一种方法类似，只是获取 Selection 对象的方法不同。

注意事项

在使用以上方法获取光标位置时，需要注意以下几点：

• Selection 对象的 getRangeAt() 方法是获取当前选中的范围，如果没有选中任何文本，该方法会抛出异常。
• startOffset 属性是一个以 0 开始的索引，表示文本节点内的字符位置，如果当前节点不是文本节点，该属性值为 0。
• getBoundingClientRect() 方法只适用于块元素和行内块元素。
• 以上方法都是在标准的浏览器环境中使用的，如果在其他环境中使用，可能会有兼容性问题。

结论

通过以上方法，我们可以在 contenteditable div 中获取光标位置，并实现一些文本编辑的功能。根据不同的需求选择不同的方法，可以更好地满足我们的需要。