textarea多选文本时关联Div位置超出文本区域问题求助

我仔细看了你的问题描述和代码，发现多选文本时弹窗（#newpost）跑到textarea外面的问题，主要出在定位逻辑的适配性上——单选单个单词时，selectionStart和selectionEnd几乎重合，这个位置肯定在textarea可视范围内；但多选时，你只依赖selectionStart计算坐标，再加上getCursorXY函数可能没处理多行文本、滚动偏移的情况，就导致弹窗错位了。

具体修复步骤 #

1. 改用选区中间位置定位，避免极端偏移

不要只取选区的起始位置，而是计算选区的中间点来定位弹窗，这样不管是从左往右选还是从右往左选，位置都会更合理：

var start = txtarea.selectionStart; 
var finish = txtarea.selectionEnd;
// 取选区中间位置作为定位基准
var targetPos = Math.floor((start + finish) / 2);
// 用中间位置获取坐标
newpost.offset(getCursorXY(txtarea, targetPos, 20)).show();

2. 修正getCursorXY的坐标计算逻辑

这个函数是定位的核心，如果它没考虑textarea的滚动距离、多行换行的特性，很容易算出错误的坐标。下面是适配了滚动和换行的版本：

function getCursorXY(textarea, pos, offset) {
    // 创建临时span来模拟光标位置
    const tempSpan = document.createElement('span');
    tempSpan.textContent = textarea.value.substring(0, pos);
    // 匹配textarea的样式，保证坐标计算准确
    tempSpan.style.cssText = `
        position: absolute;
        visibility: hidden;
        white-space: pre-wrap;
        font: inherit;
        padding: inherit;
        border: inherit;
    `;
    textarea.parentNode.appendChild(tempSpan);

    const spanRect = tempSpan.getBoundingClientRect();
    const textareaRect = textarea.getBoundingClientRect();
    
    // 清理临时元素
    tempSpan.remove();

    // 减去textarea的滚动偏移，确保坐标相对textarea本身
    return {
        top: spanRect.bottom + offset - textarea.scrollTop,
        left: spanRect.left - textareaRect.left - textarea.scrollLeft
    };
}

3. 强制限制弹窗在textarea范围内

就算计算有小偏差，也可以通过边界检查，让弹窗不会超出textarea的可视区域：

// 获取textarea和弹窗的尺寸信息
const textareaRect = txtarea.getBoundingClientRect();
const popupWidth = newpost.width();
const popupHeight = newpost.height();

// 计算不超出边界的最终位置
const cursorPos = getCursorXY(txtarea, targetPos, 20);
const finalTop = Math.max(textareaRect.top, Math.min(cursorPos.top, textareaRect.bottom - popupHeight));
const finalLeft = Math.max(textareaRect.left, Math.min(cursorPos.left, textareaRect.right - popupWidth));

// 应用最终位置
newpost.css({ top: finalTop, left: finalLeft }).show();

完整修改后的代码 #

$(document).ready(function () { 
    closePopUp(); 
    var newpost = $('#newpost'); 
    $('#mytextarea').on('select', function (e) { 
        var txtarea = document.getElementById("mytextarea"); 
        var start = txtarea.selectionStart; 
        var finish = txtarea.selectionEnd;
        
        // 取选区中间位置作为定位基准
        var targetPos = Math.floor((start + finish) / 2);
        const cursorPos = getCursorXY(txtarea, targetPos, 20);
        
        // 限制弹窗在textarea范围内
        const textareaRect = txtarea.getBoundingClientRect();
        const popupWidth = newpost.width();
        const popupHeight = newpost.height();
        const finalTop = Math.max(textareaRect.top, Math.min(cursorPos.top, textareaRect.bottom - popupHeight));
        const finalLeft = Math.max(textareaRect.left, Math.min(cursorPos.left, textareaRect.right - popupWidth));
        
        newpost.css({ top: finalTop, left: finalLeft }).show(); 
        newpost.find('div').text('replace with stars'); 
    }); 
    document.onkeydown = undo; 
});

// 适配滚动和换行的getCursorXY函数
function getCursorXY(textarea, pos, offset) {
    const tempSpan = document.createElement('span');
    tempSpan.textContent = textarea.value.substring(0, pos);
    tempSpan.style.cssText = `
        position: absolute;
        visibility: hidden;
        white-space: pre-wrap;
        font: inherit;
        padding: inherit;
        border: inherit;
    `;
    textarea.parentNode.appendChild(tempSpan);

    const spanRect = tempSpan.getBoundingClientRect();
    const textareaRect = textarea.getBoundingClientRect();
    tempSpan.remove();

    return {
        top: spanRect.bottom + offset - textarea.scrollTop,
        left: spanRect.left - textareaRect.left - textarea.scrollLeft
    };
}

为什么单选正常、多选异常？ #

单选单个单词时，selectionStart和selectionEnd几乎是同一个点，这个点必然在textarea的可视范围内；但多选时，如果选区跨行了、或者起始位置在文本的开头/结尾，selectionStart对应的坐标会因为textarea的滚动、换行渲染等因素，被计算到textarea外部，最终导致弹窗错位。

内容的提问来源于stack exchange，提问作者anub