应监听 keydown + compositionend 组合事件捕获 @ 触发时机，插入 contenteditable="false" 的提及节点并手动设置光标位置，下拉列表需基于光标坐标动态定位且挂载至 body。
如何用 contenteditable 捕获 @ 符号触发时机
直接监听 input 事件不够可靠——用户可能粘贴文本、用方向键移动光标、或删除中间字符，导致 @ 出现在非期望位置。真正该监听的是 keydown + compositionend 组合，重点捕获按下 @ 键且光标前是空白或行首的瞬间。
实操建议：
- 在
keydown中判断e.key === '@'，再用getSelection().getRangeAt(0).startOffset获取光标位置，向前查一个字符是否为空格、换行或开头 - 必须同时监听
compositionend，否则中文输入法下按完@不会触发（输入法会先发合成事件） - 避免在
input里做匹配，它无法区分“用户打 @”和“粘贴带 @ 的字符串”，容易误启下拉
怎么把 @xxx 渲染成可点击又不破坏编辑流的标签
不能用纯文本拼接，也不能直接插入 <span></span> 后还指望光标正常进出——contenteditable 对嵌套内联元素的光标行为很敏感。正确做法是用 document.execCommand('insertHTML', false, ...) 或现代 getSelection().setBaseAndExtent() 配合 Range.insertNode() 插入带 data-mention-id 和 contenteditable="false" 的 <span></span>。
实操建议：
- 插入的提及节点必须设
contenteditable="false"，否则双击会进入编辑、破坏语义 - 加
tabindex="0"和role="button"，让键盘用户能聚焦并回车触发详情 - 样式上用
display: inline-flex+align-items: center，避免换行时被拆开 - 不要用
white-space: nowrap，它会导致长昵称溢出容器且不可折行
@ 提及列表怎么和光标位置对齐且不遮挡输入
下拉列表的位置不是靠固定 top/left，而是每次计算光标在编辑区域内的绝对坐标，再通过 getBoundingClientRect() 获取光标所在 Text 节点的末尾位置，最后加上滚动偏移。硬写 position: absolute; top: 200px 在缩放、滚动、多行编辑时必然错位。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
实操建议：
- 用
window.getSelection().getRangeAt(0).getClientRects()取最后一个DOMRect，它的bottom就是下拉应出现的基准线 - 列表容器需挂载在
body下（用createPortal或document.body.appendChild），避免父容器overflow: hidden截断 - 监听
scroll和resize事件重新定位，但加throttle防抖，不然拖滚动条时卡顿 - 列表项用
aria-activedescendant配合键盘导航，别只靠鼠标
为什么 @ 提及后继续输入文字会吞掉字符或光标乱跳
根本原因是插入的提及节点是 contenteditable="false"，但紧挨着它的文本节点仍是可编辑的，浏览器对“假内联块+真文本”的光标合并逻辑不一致。Chrome 表现为光标卡在提及右侧不动，Safari 可能直接跳到下一行开头。
实操建议：
- 插入提及后，手动用
Range把光标设到提及节点后方：创建新Range，range.setStartAfter(mentionNode)，再selection.removeAllRanges()+selection.addRange(range) - 禁止用户在提及节点前后连续输入空格——监听
input，检测光标邻近是否为两个空格，自动trim()并重置光标 - 如果用 React/Vue，切勿在提及节点外层再包一层响应式 wrapper（如
<div><mention></mention></div>），这会额外增加 DOM 层级，加剧光标异常
最麻烦的其实是输入法兼容：中文用户打完“@张”还没选人，先按了空格，这时要能识别出这是输入法中止信号而非真实空格，得结合 compositionstart/compositionend 和 keydown 的 key 状态交叉判断。这个边界情况，90% 的开源 mention 库都处理得似是而非。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
