如何查找鼠标指针在字母跨度中的位置

Question

单击span元素时，如何找到鼠标指针在字母之间的位置？

我的意思是:我正在尝试编写一个不使用设计模式的WYSIWYG编辑器(类似于google-docs的文字处理器)。当用户单击文本时，我希望获得鼠标指针在单击范围内的位置，不是以像素为单位，而是以字母为单位。

g-docs文字处理器是如何做到这一点的？

google代码看起来很奇怪，所有的函数都是用单个字母命名的。

Answer 1

首先，这是一个很高的要求。祝好运!如果你打算支持IE，你会想要看看Rangy。

对于行为良好的浏览器，请使用document.getSelection()和selection.getRangeAt(0)，这里是一个演示，以便您可以在操作中看到它。单击Hello World文本。http://jsbin.com/ijuvav。

我没有找到CDN托管范围，所以我无法发布示例，但代码将基本相同：

function clickHandler() {
  var selection = rangy.getSelection();
  var range = selection.getRangeAt(0);
  alert('You clicked on character: ' + range.startOffset);
  console.log(range);
}