本文详解如何监听用户输入，在输入框中特定位置（如光标处）精准定位并弹出标签建议列表，支持动态计算坐标、滚动适配与边界处理。
在构建模板化文本编辑器（如邮件/消息模板系统）时，一个关键的用户体验优化是：当用户输入起始符号（如 [）后，实时在光标位置下方弹出匹配的标签建议列表（如 [NAME]、[EMaiL]），并支持键盘/鼠标选择。这看似简单，但核心难点在于——如何精确获取光标在页面中的 (x, y) 坐标，并将下拉列表绝对定位到该位置？本文提供一套完整、健壮、可落地的实现方案。
✅ 核心定位逻辑：四要素缺一不可
要让下拉列表“紧贴光标右侧下方”出现，需综合以下四个关键值：
- 输入框容器的视口坐标：使用 getBoundingClientRect() 获取其 left、top、width、height；
- 光标在输入内容中的字符索引：通过 input.selectionEnd 获取；
- 页面滚动偏移量：window.scrollX 和 window.scrollY，确保列表随滚动同步定位；
- 字体宽度估算（近似）：若使用等宽字体（推荐），可用 fontSize × selectionEnd 估算光标水平偏移；若非等宽，需更复杂测量（本文以等宽场景为主）。
? 注意：selectionEnd 返回的是字符索引，不是像素值。因此需结合字体大小进行换算。实际项目中建议统一使用 monospace 字体（如 ‘SFMono-Regular’, Consolas, ‘Liberation Mono’, monospace），保证每个字符宽度一致，简化计算。
? 完整实现代码（含防错与边界处理）
const input = document.getElementById('templateInput'); const taglist = document.getElementById('taglist'); const fs = 14; // 像素单位的字体大小（需与 input 的 CSS font-size 一致） // 模拟标签数据（实际从 API 获取） const allTags = new Set(['NAME', 'EMAIL', 'PHONE', 'COMPANY', 'DATE']); input.addEventListener('keyup', function(e) { const char = String.fromCharCode(e.keyCode); // 仅在输入 '[' 时触发建议（可扩展为正则匹配如 /[w*$/） if (char !== '[' && e.key !== '[') { taglist.style.display = 'none'; return; } // 1. 获取输入框容器的边界（假设 input 直接位于 body 下；若嵌套，请用 parentElement） const rect = input.getBoundingClientRect(); // 2. 计算光标大致 x 坐标（基于字符索引 + 字体宽度） const charIndex = input.selectionEnd; let left = rect.left + window.scrollX + (charIndex * fs); // 3. 边界保护：防止列表超出输入框右边界 if (left + 150 > rect.left + rect.width + window.scrollX) { left = rect.left + rect.width + window.scrollX - 150; // 150px 为下拉列表预估宽度 } // 4. y 坐标：紧贴输入框底部（+ 少量间距） const top = rect.top + rect.height + window.scrollY + 4; // 5. 渲染建议列表 renderTagList(allTags, left, top); }); function renderTagList(tagSet, left, top) { const html = Array.from(tagSet) .map(tag => `${tag} `) .join(''); taglist.innerhtml = `${html}
`; // 应用绝对定位 Object.assign(taglist.style, { position: 'absolute', left: `${left}px`, top: `${top}px`, display: 'block', 'font-size': '12px', 'font-family': 'monospace', 'max-height': '200px', overflow: 'auto' }); } // 点击选择标签（示例） taglist.addEventListener('click', function(e) { if (e.target.classList.contains('tag-item')) { const tag = e.target.dataset.tag; const start = input.selectionStart; const end = input.selectionEnd; const value = input.value; // 插入格式化标签：[NAME] const newValue = value.slice(0, start) + `[${tag}]` + value.slice(end); input.value = newValue; // 光标置于标签后 input.setSelectionRange(start + tag.length + 3, start + tag.length + 3); taglist.style.display = 'none'; } }); // 失焦或按 Esc 时隐藏列表 document.addEventListener('click', (e) => { if (!input.contains(e.target) && !taglist.contains(e.target)) { taglist.style.display = 'none'; } }); input.addEventListener('keydown', (e) => { if (e.key === 'Escape') taglist.style.display = 'none'; });⚠️ 关键注意事项与进阶建议
- 字体一致性是前提：务必为 input 设置 font-family: monospace，否则 charIndex × fs 计算严重失准；
- selectionEnd 不等于光标像素位置：它只是字符串索引。对变宽字体，需用 canvas.measureText() 或 Range.getClientRects() 精确测量（较重，非必需场景不推荐）；
- 响应式与缩放兼容性：getBoundingClientRect() 返回的是 css 像素，已适配缩放（DPR），无需额外处理；
- 性能优化：避免在每次 keyup 都重建 dom，可复用 taglist 元素，仅更新 innerHTML 和 style；
- 无障碍支持：为列表添加 role=”listbox”，选项添加 role=”option”，并用 aria-activedescendant 支持键盘导航；
- 扩展匹配逻辑：当前仅匹配 [ 触发，可升级为检测 [[A-Za-z]*$ 正则，实现输入 [na 时过滤 NAME、NATIONALITY。
通过以上方案，你不仅能精准定位下拉列表，还能构建出专业级的模板标签体验——既轻量，又稳定，且易于维护与扩展。