獲取插入符號 position 相對於 window (x,y) 的坐標
[英]Get caret position coordinates relative to the window (x,y)
問題描述
抽象的
我想獲得插入符號的window position（以像素為單位）（當用戶開始打字時）。
全文
有一個多行contentEditable元素，其中包含復雜的 HTML 結構。
當用戶開始在其中的任何位置鍵入時，在第一次擊鍵時，我想在插入符號下方放置一個absolute定位的元素。 必須將新添加的元素注入到<body>標記中，而不是作為contentEditable元素中的 DOM 節點。
因此，我需要插入符號的確切全局坐標。 我會清楚沒有文本選擇。
選擇在這里無關緊要，甚至不太可能。
我的代碼
通常，一個問題應該包括一些 OP 嘗試過並需要幫助的代碼，但在這種情況下，我完全沒有想法。 input DOM 事件不公開坐標。 我至少會提供我所追求的最終結果：
.info{ border: 1px solid gold; padding: 8px; background: rgba(255,255,224, .8); position: absolute; z-index: 9999; max-width: 180px; }
<h2>contentEditable:</h2> <div contentEditable> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <strong>Ut enim ad minim veniam</strong>, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <p> Imagine the caret is somewhere here and the info element is right under it... <div>reprehenderit <em>in</em> voluptate</div> velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt <small>mollit anim</small> id est laborum. </p> </div> <div class='info' style='top:150px; left:60px;'>Extra info with a long list of some content goes here</div>
免責聲明：
我已經對此事進行了很多挖掘，但不幸的是找不到答案。 有些問題看起來很相似，但看起來更深入，它們根本不是，有些是非常古老和過時的
謝謝！
1 個解決方案
解決方案1
0 2019-11-22 15:07:02
經過更多的挖掘，我得到了一個Gist 文件，它完全符合我的要求，
所以這是一個我已經調整了一下的工作：
/** * Get the caret position, relative to the window * @returns {object} left, top distance in pixels */ function getCaretGlobalPosition(){ const r = document.getSelection().getRangeAt(0) const node = r.startContainer const offset = r.startOffset const pageOffset = {x:window.pageXOffset, y:window.pageYOffset} let rect, r2; if (offset > 0) { r2 = document.createRange() r2.setStart(node, (offset - 1)) r2.setEnd(node, offset) rect = r2.getBoundingClientRect() return { left:rect.right + pageOffset.x, top:rect.bottom + pageOffset.y } } } /////////////////[ DEMO ]\\\\\\\\\\\\\\\\\\\\ const contenteditable = document.querySelector('[contenteditable]') const infoElm = document.querySelector('.info') contenteditable.addEventListener('input', onInput) function onInput(){ const caretGlobalPosition = getCaretGlobalPosition() infoElm.style.cssText = `top:${caretGlobalPosition.top}px; left:${caretGlobalPosition.left}px;` }
.info{ border: 1px solid gold; padding: 8px; background: rgba(255,255,224, .8); position: absolute; z-index: 9999; max-width: 180px; display:none; }.info[style]{ display:block; }
<h2>Place caret somewhere and type:</h2> <div contenteditable> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <strong>Ut enim ad minim veniam</strong>, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <h2> Imagine the caret is somewhere here and the info element is right under it... <div>reprehenderit <em>in</em> voluptate</div> velit esse cillum dolore eu fugiat f nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt <small>mollit anim</small> id est laborum. </h2> </div> <div class='info'>Extra info with a long list of some content goes here</div>
我發現的另一個解決方案： https://github.com/component/textarea-caret-position
如何在 contentEditable div 中獲取插入符號 x 和 y 位置
[英]How to get caret x and y position in contentEditable div
如何獲取用戶選擇相對於文檔/窗口的中心錨點位置（x，y）？
[英]How can I get the user's selection's center anchor point position (x, y) relative to the document/window?
在旋轉的 div 上獲取相對於瀏覽器 window 的 div 的 x 和 y
[英]get x and y relative to the brower window of a div on a rotated div
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.