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

标签 javascript jquery html iframe contenteditable

我想在带有 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/

相关文章:

javascript - useAnimationOnDidUpdate react 钩子(Hook)实现

javascript - 将 blob(image) 传递给 php/laravel 并获取输入并保存

javascript - 使用 js Promise 的复杂决策树

javascript - 在字符串末尾使用通配符

javascript - Backbone JS View 渲染不显示

jquery - 单击事件未绑定(bind)到由 ajax 动态加载的内容

javascript - r.js 由于 ENOENT 错误而无法构建...说找不到 ".bin/bower"

django - 通过 jQuery 的 $.load() 在 GET 请求中将 Json 发送到 Django

html - 一些 CSS 样式表没有链接到 HTML

javascript - 通过按钮展开和折叠行