本文详解如何监听用户输入，在输入框中特定位置（如光标处）精准定位并弹出标签建议列表，支持动态计算坐标、滚动适配与边界处理。
在构建模板化文本编辑器（如邮件/消息模板系统）时，一个关键的用户体验优化是：当用户输入起始符号（如 [）后，实时在光标位置下方弹出匹配的标签建议列表（如 [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），保证每个字符宽度一致，简化计算。
? 完整实现代码（含防错与边界处理）
<input type="text" id="templateInput" placeholder="输入如：Hello [NAME]，自动提示..." /> <div id="taglist"></div>
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 => `<li class="tag-item" data-tag="${tag}">${tag}</li>`)
.join('');
taglist.innerHTML = `<ul style="margin:0;padding:4px 0;background:#fff;border:1px solid #ddd;border-radius:4px;box-shadow:0 2px 6px rgba(0,0,0,0.1);z-index:1000;">${html}</ul>`;
// 应用绝对定位
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。
通过以上方案，你不仅能精准定位下拉列表，还能构建出专业级的模板标签体验——既轻量，又稳定，且易于维护与扩展。
