HTML无法直接实现@成员功能，必须由JavaScript驱动：textarea+浮层适合轻量场景，contenteditable适合富文本但需处理光标、删除、粘贴等复杂逻辑。
HTML里没法直接实现@成员功能
HTML本身只是标记语言，不处理逻辑、不管理用户列表、也不监听输入行为。所谓“@成员”是前端交互功能，必须靠 JavaScript 驱动，HTML 只负责提供基础结构（比如 contenteditable 区域或 textarea）和可挂载事件的容器。
常见错误现象：input 或 textarea 里敲 @ 没反应；DOM 中硬写死 @张三 但无法编辑、无法回删、复制粘贴后格式全乱。
关键点：
-
contenteditable更适合富文本场景（如支持加粗、换行、嵌入用户卡片），但光标控制和 DOM 同步复杂 -
textarea简单可控，但无法内嵌元素，@用户名只能是纯文本，高亮和点击需靠浮层模拟 - 无论选哪种，都得监听
keydown和input，检测@后是否在词首、是否被空格/换行截断
用 textarea + 浮层实现轻量级 @ 补全
这是最易落地、兼容性最好、也最容易调试的方案。核心是：不改 textarea 的内容结构，所有“高亮”“下拉”“插入”都靠绝对定位浮层和 JS 字符串操作完成。
使用场景：评论框、简短留言、内部协作工具的轻量输入框。
实操建议：
- 监听
textarea的input事件，用正则匹配最近一个未闭合的@\w*（例如@zha） - 计算光标位置，调用
textarea.getBoundingClientRect()+getSelection().getRangeAt(0)定位浮层左上角 - 补全项点击后，用
textarea.setRangeText()替换当前@xxx文本，避免手动拼接导致光标错乱 - 别用
innerHTML直接写入带@的 HTML——textarea不认标签，会显示为字面量
contenteditable 中插入可编辑的 @ 用户节点
如果需要点击 @ 用户跳转主页、支持删除整块（而非逐字删）、或与其他富文本格式共存，就得走 contenteditable 路线。但它不是“把 div 设成可编辑”就完事了。
容易踩的坑：
- 直接
document.execCommand已废弃，且在现代浏览器中对自定义节点支持差 - 插入
@张三后，用户按 Backspace 可能只删掉@或只删文字，留个空span - 移动端光标经常卡在
span边界外，无法连续输入 - 复制粘贴时，
span可能被过滤或变成纯文本
可行做法：
- 插入时用
document.createElement('span')并设contentEditable="false"，再用range.insertNode() - 监听
keydown，捕获Backspace和Delete，判断光标紧邻span.at时整块移除 - 禁用默认粘贴行为（
event.preventDefault()），用clipboardData.getData('text/plain')落地为纯文本，避免污染结构
用户名补全数据怎么接、怎么筛
前端补全提示不是靠本地数组硬写死的。真实场景下，用户列表动态、权限隔离、搜索需防抖、输入过快还可能收到乱序响应。
关键细节：
- 请求不能每敲一个字母都发一次——用
setTimeout+clearTimeout做防抖，延迟 200ms 再查 - 查询参数必须带上下文：比如
channel_id=456，否则返回全员列表，@ 效率低还暴露信息 - 后端返回字段至少含
id、name、avatar_url，前端别自己拼头像路径 - 前端筛选要区分大小写？中文拼音首字母？这些规则必须和服务端一致，否则搜“zhang”找不到“张三”
- 缓存策略：同一关键词 5 分钟内重复请求，优先读内存 Map，而不是反复 fetch
补全弹窗关闭时机常被忽略：失焦、Esc、点击非选项区域、输入非 @ 字符后继续打字……这些都要显式收起，否则浮层残留遮挡内容。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
