gpt4 book ai didi

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

转载 作者:技术小花猫 更新时间:2023-10-29 12:38:12 25 4
gpt4 key购买 nike

我想在带有 contentEditableiframe 中放置一个 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com