如何在textarea中获取所选文本的position？

Question

我想获取文本区域内所选文本的 position。 这是必要的，以便在所选文本上方显示带有弹出窗口的 div。 在香草JS或angular（可能是指令）中是否有一些可以理解的简单方法来计算？

我需要坐标，用于设置绝对 position

Answer 1

这实际上很容易做到。

您可以从任何文本字段中获取选择开始和选择结束。 看看这个。

它的工作方式如下：

 document.onselectionchange = function() { let inp = document.querySelector("input"); document.querySelector("p").innerText = "Start: "+inp.selectionStart+"\nEnd: "+inp.selectionEnd+"\n\nSelected: "+inp.value.substring(inp.selectionStart, inp.selectionEnd); }

 <!DOCTYPE html> <html> <head> <title>Hello</title> </head> <body> <p></p> <input> </body> </html>

如果您想获得 position，由于某种原因，它不适用于输入，但这也是它的代码。 它从选择范围中获取 boundingRect。

 document.onselectionchange = function() { let inp = document.querySelector("div"); let sel = document.getSelection(); let bound = sel.getRangeAt(0).getBoundingClientRect(); document.querySelector("p").innerText = "Selected: "+inp.innerText.substring(sel.selectionStart, sel.selectionEnd)+"\n\nX: "+bound.left+"\nY: "+bound.top+"\n\nWidth: "+bound.width+"\nHeight: "+bound.height; }

 <:DOCTYPE html> <html> <head> <title>Hello</title> </head> <body> <p></p> <div style="border: 1px solid black" contenteditable="true"> </body> </html>

如何在textarea中获取所选文本的position？

问题描述

1 个解决方案

解决方案1
1 2021-12-21 17:54:15

如何在textarea中获取所选文本的position？

问题描述

1 个解决方案

解决方案1 1 2021-12-21 17:54:15

解决方案1
1 2021-12-21 17:54:15