本文详解如何在用户输入 `[` 时，精准计算光标位置（x/y 坐标），动态创建并定位下拉标签列表，实现类似 markdown/模板变量的智能补全体验。
在构建支持模板变量（如 \[NAME\]、\[EMAIL\]）的 Web 表单时，仅完成字符串替换是基础；真正提升用户体验的关键，在于实时、精准、上下文感知的标签建议浮层——即当用户键入 [ 后，自动在光标正下方弹出匹配的标签列表，并支持键盘/鼠标选择。
核心难点不在于渲染列表，而在于：如何让 精确“钉”在输入框内当前光标所在字符的右下方？
这需要融合 DOM 几何计算、滚动偏移与字体度量，以下是完整、可落地的技术方案：
✅ 关键四要素定位法
要将建议列表（如
- ）绝对定位到光标右侧底部，需同时获取：
| 要素 | 获取方式 | 说明 |
|---|---|---|
| 输入框视口坐标 | input.parentElement.getBoundingClientRect() | 推荐对父容器（如 ）调用，避免 input 自身 padding/border 干扰
|
| 垂直偏移（top） | rect.top + rect.height + window.scrollY | rect.top 是距视口顶部距离，+rect.height 下移至输入框底部，+window.scrollY 补偿页面纵向滚动 |
| 水平偏移（left） | rect.left + window.scrollX + (input.selectionEnd * fontSize) | selectionEnd 给出光标前字符数，乘以平均字符宽度（需预设等宽字体或估算） |
| 字体大小（fontSize） | CSS 中显式设置 input { font-family: monospace; font-size: 14px; } | 强烈建议使用等宽字体（如 monospace），确保 charIndex × pxPerChar 计算可靠 |
✅ 完整实现示例（含防越界处理）
<div class="input-wrapper"> <input type="text" id="templateInput" placeholder="输入如：Hello [NAME]..." /> </div> <div id="taglist" style="display:none; position:absolute; background:#fff; border:1px solid #ccc; border-radius:4px; max-height:200px; overflow-y:auto; z-index:1000;"></div>
const input = document.getElementById('templateInput');
const tagList = document.getElementById('taglist');
const fontSize = 14; // 必须与 CSS 中 font-size 一致（px）
input.addEventListener('keyup', function(e) {
// 仅在输入 '[' 时触发
if (e.key !== '[') return;
const rect = input.parentElement.getBoundingClientRect();
const scrollX = window.scrollX;
const scrollY = window.scrollY;
// 计算 left：考虑字符数 × 字宽，但防止超出输入框宽度
let left = rect.left + scrollX + (input.selectionEnd * fontSize);
if (left > rect.left + scrollX + rect.width - 100) { // 预留 100px 列表宽度
left = rect.left + scrollX + rect.width - 100;
}
const top = rect.top + rect.height + scrollY + 4; // +4 微调间距
// 更新列表位置并显示
tagList.style.left = `${left}px`;
tagList.style.top = `${top}px`;
tagList.style.display = 'block';
// 渲染匹配标签（此处简化，实际应过滤 alltags）
renderTagSuggestions();
});
function renderTagSuggestions() {
const suggestions = Array.from(alltags).filter(tag =>
tag.toLowerCase().includes(input.value.slice(input.selectionStart - 1).toLowerCase())
);
tagList.innerHTML = suggestions.map(tag =>
`<div class="tag-item" data-tag="${tag}">${tag}</div>`
).join('');
// 绑定点击事件
tagList.querySelectorAll('.tag-item').forEach(el => {
el.addEventListener('click', () => {
const startPos = input.selectionStart;
const endPos = input.selectionEnd;
const before = input.value.substring(0, startPos);
const after = input.value.substring(endPos);
input.value = `${before}[${el.dataset.tag}]${after}`;
input.focus();
input.setSelectionRange(startPos + el.dataset.tag.length + 3, startPos + el.dataset.tag.length + 3);
tagList.style.display = 'none';
});
});
}⚠️ 注意事项与优化建议
- 字体必须等宽：非等宽字体（如 sans-serif）下 selectionEnd × fontSize 会严重失准，务必设为 font-family: 'Courier New', monospace。
- 动态字体适配：若需支持多字号，可用 getComputedStyle(input).fontSize 解析像素值，或改用 canvas.measureText() 精确测量。
- 响应式与缩放：getBoundingClientRect() 返回的是 CSS 像素，已兼容缩放（Zoom），无需额外处理。
- 性能优化：keyup 触发频繁，建议添加防抖（setTimeout 延迟 100ms）或仅对 [ 键生效（如上例）。
- 无障碍支持：为 taglist 添加 role="listbox" 和 aria-labelledby，并支持 ↑/↓/Enter 键导航。
通过这套方法，你不仅能复现 Stack Overflow 图中的效果，更能构建出专业级的模板变量补全系统——精准、稳定、可扩展。记住：*DOM 几何 ≠ 视觉直觉，但 getBoundingClientRect() + selectionEnd + `scroll` 的组合，就是浏览器给出的标准答案。**
