获取textarea中某个文字的位置，如新浪微博的输入框，输入一个@或#符号后，会自动调起popover层，这个层的位置显然是基于@或#符号的位置来计算的，那么，如何获取@或#符号的位置呢（相对于body或textarea边框的偏移量）？

获取textarea中文字的位置

2 个回答

得票最新

已注销

4221119

发布于
2019-09-03

✓ 已被采纳

大概思路是：

创建一个隐藏的div，样式textarea一样
当textarea内容发生变化，复制内容到div
添加一个inline-block到div
这个inline-block相对于div的位置就是popover所在的位置

<!DOCTYPE html>
<html>

<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #input {
            display: block;
            width: 100%;
            font-size: 16px;
        }
        #display {
            border: 1px solid red;
        }
        #text{
            white-space: pre;
        }
        #popover {
            display: inline-block;
            font-size: 16px;
        }
    </style>
</head>

<body>
    <textarea id="input"></textarea>
    <div id="display">
        <span id="text"></span>
        <div id="popover">popover</div>
    </div>
    <script>
        const input = document.querySelector("#input");
        const display = document.querySelector("#display");
        const text = document.querySelector("#text");
        const popover = document.querySelector("#popover");

        input.addEventListener("input", () => {
            text.textContent = input.value;
            setTimeout(() => {
                const displayRect = display.getBoundingClientRect();
                const popoverRect = popover.getBoundingClientRect();
                const left = popoverRect.left - displayRect.left;
                const top = popoverRect.top - displayRect.top;
                console.log(`left:${left}, top:${top}`);
            }, 0);
        });
    </script>
</body>

</html>

CodeSandbox