javascript - 如何使用 contentEditable 从 iframe 中的当前插入符号位置获取像素偏移量

Question

我想在带有 contentEditable 的 iframe 中放置一个 float 的 div 元素，以防用户输入某个组合键(对于自动完成目的)。

我知道如何获得插入符位置:document.getElementById('elm1_ifr').contentWindow.getSelection().anchorOffset

我可以用它来计算 div 的 left 属性，但我似乎无法弄清楚如何获得 top。

我想到的另一种可能性是使用:document.getElementById('elm1_ifr').contentWindow.getSelection().anchorNode.parentNode

并使用 jQuery 获取偏移量，但如果父文本行很长，我将只能提取第一行的顶部位置。

谁能帮我解决这个问题？

Answer 1

唯一可靠的方法是在插入符处插入一个临时元素(确保它的宽度为零)，获取它的位置并再次将其删除。您还应该将文本节点的两端(如果它是包含插入符号的文本节点)重新粘在一起，以确保 DOM 与插入节点之前一样。但是请注意，这样做(或对可编辑内容进行任何其他手动 DOM 操作)会破坏浏览器的内部撤消堆栈。

原因是仔细阅读the spec for the getBoundingClientRect() method of Range表明 getBoundingClientRect() 没有义务为折叠的 Range 返回一个 Rect。从概念上讲，并非文档中的每个位置都有明确定义的边界矩形。然而，插入符号在屏幕上确实有物理位置，在我看来应该由 Selection API 提供，但目前浏览器中没有任何东西可以提供这一点。