本文介绍如何强制用户在表单提交前，必须从动态过滤的 <ul> 列表中选择一项（而非手动输入任意文本），通过结合 focus/blur 事件、微任务延迟校验与 DOM 状态判断，实现精准、无干扰的实时选择验证。
本文介绍如何强制用户在表单提交前，必须从动态过滤的 `
- ` 列表中选择一项（而非手动输入任意文本），通过结合 `focus`/`blur` 事件、微任务延迟校验与 dom 状态判断，实现精准、无干扰的实时选择验证。
在构建带自动补全功能的表单时（例如“订单号”字段联动 <ul> 下拉列表），一个常见但关键的交互需求是：禁止用户绕过选择、直接键入无效值（如输入 "mee" 却未点击出现的 "MEETINGS" 选项）。这不仅是前端体验优化，更是数据一致性保障的第一道防线。
核心逻辑并非简单监听 blur，而是解决一个典型的事件竞态问题：当用户点击列表项时，input 先触发 blur，随后才执行 click 处理器设置 input.value。若 blur 回调立即校验，此时 value 尚未更新，误判为“未选择”。
✅ 正确解法分三步：
- 延迟校验：在 blur 中使用 setTimeout(..., 0) 或 Promise.resolve().then(...) 将校验逻辑推至微任务队列末尾，确保 DOM 更新（含 input.value 赋值）已完成；
- 白名单比对：预先缓存所有合法选项值（如 ['MEETINGS', 'SHIPPING', 'INVOICE']），校验时检查 input.value 是否存在于该数组中；
- 智能聚焦恢复：校验失败时，不仅 alert() 提示，更应 input.focus() 并阻止焦点流向下一字段（可配合 event.preventDefault() 在 focus 阶段拦截）。
以下是精简可靠的实现代码：
立即学习“前端免费学习笔记（深入）”；
<input id="myInput" type="text" placeholder="输入订单号..." /> <ul id="myUL" style="display:none;"> <li data-value="MEETINGS">MEETINGS</li> <li data-value="SHIPPING">SHIPPING</li> <li data-value="INVOICE">INVOICE</li> </ul>
document.addEventListener('DOMContentLoaded', () => {
const input = document.getElementById('myInput');
const list = document.getElementById('myUL');
const validValues = Array.from(list.querySelectorAll('li'))
.map(el => el.dataset.value);
// 点击列表项 → 同步填充输入框并隐藏列表
list.addEventListener('click', (e) => {
if (e.target.tagName === 'LI') {
input.value = e.target.dataset.value;
list.style.display = 'none';
input.focus(); // 保持焦点便于继续操作
}
});
// 输入时显示/过滤列表（此处省略过滤逻辑，仅示意）
input.addEventListener('input', () => {
if (input.value.trim()) {
list.style.display = 'block';
// TODO: 过滤 list 中的 li 元素
} else {
list.style.display = 'none';
}
});
// 关键：blur 延迟校验
input.addEventListener('blur', () => {
// 使用 Promise 微任务确保 value 已被 click 处理器更新
Promise.resolve().then(() => {
if (!validValues.includes(input.value.trim())) {
alert('请从下拉列表中选择有效订单号！');
input.focus();
input.select(); // 高亮文本，方便重选
}
});
});
// 可选：全局焦点拦截（防止用户用 Tab 键跳过）
document.addEventListener('focusin', (e) => {
if (e.target !== input && list.style.display !== 'none') {
input.focus();
alert('请先完成订单号选择！');
}
});
});⚠️ 注意事项：
- 不要依赖 window.getComputedStyle(list).display 判断列表是否“可见”，而应维护一个明确的状态变量（如 isListOpen = true/false），避免 CSS 变更导致逻辑失效；
- 若需支持键盘导航（↑↓→Enter），应在 input 上监听 keydown，并增强列表项的 active 状态管理；
- 多字段场景下，将校验逻辑封装为函数（如 validateSelection(input, validValues, list)），复用性更高；
- 最终表单提交时，仍需服务端二次校验——前端验证仅为用户体验层防护。
这种模式在行业中有标准术语：“受控自动补全”（Controlled Autocomplete） 或 “强制选择式输入”（Mandatory Selection Input），其本质是将输入框降级为“只读展示区”，所有有效值必须经由预定义选项注入。
