我想在带有 contentEditable
的 iframe
中放置一个 float 的 div
元素,以防用户输入某个组合键(对于自动完成目的)。
我知道如何获得插入符位置:
document.getElementById('elm1_ifr').contentWindow.getSelection().anchorOffset
我可以用它来计算 div 的 left
属性,但我似乎无法弄清楚如何获得 top
。
我想到的另一种可能性是使用:
document.getElementById('elm1_ifr').contentWindow.getSelection().anchorNode.parentNode
并使用 jQuery 获取偏移量,但如果父文本行很长,我将只能提取第一行的顶部位置。
谁能帮我解决这个问题?
最佳答案
唯一可靠的方法是在插入符处插入一个临时元素(确保它的宽度为零),获取它的位置并再次将其删除。您还应该将文本节点的两端(如果它是包含插入符号的文本节点)重新粘在一起,以确保 DOM 与插入节点之前一样。但是请注意,这样做(或对可编辑内容进行任何其他手动 DOM 操作)会破坏浏览器的内部撤消堆栈。
原因是仔细阅读the spec for the getBoundingClientRect()
method of Range
表明 getBoundingClientRect()
没有义务为折叠的 Range 返回一个 Rect。从概念上讲,并非文档中的每个位置都有明确定义的边界矩形。然而,插入符号在屏幕上确实有物理位置,在我看来应该由 Selection API 提供,但目前浏览器中没有任何东西可以提供这一点。
关于javascript - 如何使用 contentEditable 从 iframe 中的当前插入符号位置获取像素偏移量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8456652/