要实现textarea中@提及浮窗，需用javascript监听输入、通过隐藏div估算光标坐标、动态渲染绝对定位浮窗并优化兼容性。
HTML文本域（<textarea></textarea>）本身不支持富文本或内嵌浮窗提示，要实现类似微博、微信中输入 @ 后弹出好友列表的“@提及”浮窗，需结合 JavaScript + DOM 操作 + CSS 定位，核心在于监听输入、解析光标位置、动态渲染浮窗并精准定位。
监听 @ 符号触发浮窗
在 textarea 的 input 或 keydown 事件中检测用户是否刚输入 @（注意避免重复触发）：
- 用
event.target.value获取当前内容，正则匹配末尾是否为@或\s@ - 记录触发时的光标位置（
textarea.selectionStart），用于后续计算浮窗坐标 - 若已存在浮窗，先销毁再重建；避免多次叠加
获取光标在 textarea 中的屏幕坐标
textarea 是纯文本控件，无法直接获取某字符的像素位置，需通过辅助方法估算：
- 创建一个隐藏的
<div>（或 <code><span></span>），样式与textarea完全一致（字体、字号、行高、padding、box-sizing） - 将光标前的内容（含换行符）复制到该 div，并在对应位置插入一个带
position: absolute的占位<span id="cursor-anchor"></span> - 用
document.getElementById('cursor-anchor').getBoundingClientRect()获取其相对于视口的位置 - 减去
textarea的 offsetTop/Left，即可得到相对于 textarea 左上角的偏移量 - 浮窗
left= textarea.offsetLeft + 光标X偏移（可粗略按字符宽度估算，或用上述辅助 div 精确获取） - 设置
position: absolute和z-index: 1000，确保浮在 textarea 上方 - 绑定点击/键盘操作（↑↓回车）选择好友，插入格式如
@张三[uid:123]，然后隐藏浮窗
渲染并定位浮窗（Popover）
浮窗建议用绝对定位的 <div class="mention-suggestions"> 实现，关键定位逻辑：
<ul>
<li>浮窗 <code>top = textarea.offsetTop + 光标Y偏移 + 行高（通常再 + 4px 避免遮挡）
兼容性与体验优化
移动端和不同浏览器对光标定位支持不一，需注意：
- iOS Safari 中
selectionStart在软键盘弹出后可能不准，建议延迟 100ms 再读取 - 输入中文时，避免在拼音未上屏阶段误触发（可加
compositionstart/compositionend判断） - 浮窗超出窗口边界时，自动调整方向（如顶部空间不足则显示在光标下方）
- 支持 ESC 键关闭浮窗，失焦时自动隐藏
