JavaScript'contenteditable' - 获取/设置插入位置

Question

我已经阅读了几篇关于插入符号的帖子,但似乎都没有回答我的特定问题.

问题:我希望插入符号作为div1出现在div2上的确切位置

所以,我需要一些方法来读取用户点击div1的位置,然后当div2出现时将光标/插入符号放在同一位置,这样就是一组getCaretLocation(in_div_id)和setCaretLocation(in_div_id)函数.

有办法吗？

谢谢 -

Answer 1

简答:你做不到

龙答:你要面对的问题是,你就可以得到(X,Y)坐标上DIV1单击事件,但插入位置而执行任何你需要知道的内容插入符的位置(这是插入符号前面的字符数).

要将(x,y)坐标转换为字符位置,您实际上需要知道之前有多少个字符(即,如果文本是ltr,则保留在当前行和上面的字符处).

如果使用固定宽度字体,则可以简化问题:将(x,y)坐标映射到字符网格上的(线,列)坐标.

但是,您仍然面临不知道文本如何被包装的问题.例如 :

------------------
|Lorem ipsum     |
|dolor sit amet  |
|consectetur     |
|adipiscing elit |
------------------

如果用户点击d的悲,你知道的字符是2号线1号,但不知道包裹算法有没有办法,你就会知道,这是在"Lorem存有悲坐第13个字符... ".并且无法保证这种包装算法在浏览器和平台上是相同的.

现在,我想知道为什么你会div在第一时间使用2个不同的同步？当用户点击(或悬停)时,仅使用一个div并将其内容设置为可编辑是不是更容易？