实现@好友快捷列表弹窗需三步：监听输入事件检测@触发时机并定位光标；动态匹配用户后，用临时span计算坐标显示绝对定位下拉框；选中后精准替换文本、设置新光标位置，并优化防抖、缓存与交互体验。
实现评论回复表单中 @好友 的快捷列表弹窗，核心是监听输入框的 @ 触发时机、动态匹配用户、定位光标位置插入内容，并控制弹窗显隐。下面分关键步骤说明：
监听输入与触发匹配
在 textarea 或富文本编辑器的输入事件（input、keydown）中检测是否输入了 @ 符号，且前面是空格或行首、后面为空（即处于“@待输入”状态）：
- 用正则如
/^@([a-zA-Z0-9\u4e00-\u9fa5]*)$/匹配当前光标前最近的以@开头的片段 - 推荐使用
compositionstart/compositionend避免中文输入法干扰 - 获取光标位置（
textarea.selectionStart），反向扫描直到遇到空格、换行或开头，提取候选字符串
渲染并定位悬浮提示框
匹配到有效 @ 前缀后，显示一个绝对定位的下拉列表（非 select，而是 div + ul/li）：
- 通过
getBoundingClientRect()获取光标处的坐标：可先创建临时span插入当前文本前缀（含@），再读其右下角位置作为弹窗锚点 - 弹窗需设置
position: absolute; z-index: 1000;，并监听点击/ESC/失焦自动关闭 - 支持键盘导航（↑↓切换，Enter 选中，ESC 取消）
插入昵称并恢复光标
点击或回车选中某位好友后，需精准替换原 @xxx 片段，并将光标置于昵称后：
- 读取原始
textarea.value，根据之前记录的起始位置（start）和当前长度，用新昵称替换旧内容 - 计算新光标位置 =
start + 新昵称.length + 1（+1 是补一个空格，提升可读性） - 设置
textarea.setSelectionRange(newPos, newPos)并聚焦 - 可选：为 @用户名添加样式（如蓝色+背景浅灰），需配合富文本（
contenteditable）或前端高亮渲染
性能与体验优化建议
避免卡顿和误触发：
- 用户列表建议前端缓存（如首次加载全部，或按需搜索接口 + 本地模糊匹配）
- 防抖匹配请求（若走后端搜索），但本地匹配无需延迟
- 限制弹窗最多显示 8–10 条，支持滚动；无结果时显示“未找到”
- 输入过程中持续更新匹配（如输入 “@zha” 实时过滤 “张三”“赵四”），但只在
@后有字符时才显示弹窗
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
