Question

HTML contenteditable 标签里怎样获取光标像素位置

Answer 1

1. 如果是 <input> <textarea> 一类输入框, 内部纯文本, 比较好模拟.
   我的方案是使用相同的样式, 维护一份拷贝, 取出标签的宽度即可,
   复杂一些的话就在结尾加一个标签, 能从标签获取到光标的位置..

2. window.getSelction().getRangeAt(0).startOffset 去取位置,

3. sel = getSelection()
   document.onclick = function(event) {
    event.preventDefault();
    range = new Range;
    range.selectNode(event.target);
    sel.removeAllRanges();
    sel.addRange(range)
   }
   
   document.onclick = function(event) {
    event.preventDefault()
    console.log(event.target.getClientRects()[0])
   }
   
   
   

4. Selection 对应的是界面上的选中内容, 而 Range 是 Selection 当中的一个选中的区域.
   简单的理解是, 一个 Selection 里会有多个 Range, Range 包含起始位置结束位置等等,
   起始未知需要知道在哪个节点, 偏移量是多少等等
   当然还有根据 Selection 跟 Range 用上面的位置信息来操作的 API

5. 具体操作的代码大概要结合 StackOverflow 上具体的用例来理解的了
   简单的自己写一个比如, 选中点击位置...

6. 这个两个 API 的兼容性有一些问题, 比如 new Range 会在 Safari 保存,
   比如 range.baseNode 在 Firefox 下不存在..
   为了减少兼容性造成的影响, 可以用 rangy 这个模块:
   https://github.com/timdown/rangy/wiki

7. 有点答跑题了.. 后面回到重点.. 答案在 MDN 关于这两个 API 的文档当中,
   在 Range 的示例当中, 有试验的新 API 来提供对应的功能

8. https://developer.mozilla.org/en/docs/Web/API/Range

9. Range.getBoundingClientRect()
   Returns a ClientRect object which bounds the entire contents of the Range; this would be the union of all the rectangles returned by range.getClientRects().

10. Range.getClientRects()
    Returns a list of ClientRect objects that aggregates the results of Element.getClientRects() for all the elements in the Range.

11. 这两个 API 就可以返回选中的 range 的像素位置了

12. 然后按照文档的提示, 对于元素还有 getClientRects 这个 API 可以用于获取标签的像素位置:

13. https://developer.mozilla.org/en-US/docs/Web/API/Element.getClientRects

14. The Element.getClientRects() method returns a collection of rectangles that indicate the bounding rectangles for each box in a client.

15. 写个脚本测试一下, 确实 OK:

16. 关于具体用例看网上的文章: http://www.css88.com/archives/4187

17. 关于浏览器兼容性可以看这里, 似乎蛮好的: http://www.quirksmode.org/dom/w3c_cssom.html