确保用户从 HTML 表单过滤后的下拉列表里选取有效项

本文介绍如何强制用户在表单提交前，必须从动态过滤的 <ul> 列表中选择一项（而非手动输入任意文本），通过结合 focus/blur 事件、微任务延迟校验与 DOM 状态判断，实现精准、无干扰的实时选择验证。

本文介绍如何强制用户在表单提交前，必须从动态过滤的 `

• ` 列表中选择一项（而非手动输入任意文本），通过结合 `focus`/`blur` 事件、微任务延迟校验与 dom 状态判断，实现精准、无干扰的实时选择验证。

在构建带自动补全功能的表单时（例如“订单号”字段联动 <ul> 下拉列表），一个常见但关键的交互需求是：禁止用户绕过选择、直接键入无效值（如输入 "mee" 却未点击出现的 "MEETINGS" 选项）。这不仅是前端体验优化，更是数据一致性保障的第一道防线。

核心逻辑并非简单监听 blur，而是解决一个典型的事件竞态问题：当用户点击列表项时，input 先触发 blur，随后才执行 click 处理器设置 input.value。若 blur 回调立即校验，此时 value 尚未更新，误判为“未选择”。

✅ 正确解法分三步：

1. 延迟校验：在 blur 中使用 setTimeout(..., 0) 或 Promise.resolve().then(...) 将校验逻辑推至微任务队列末尾，确保 DOM 更新（含 input.value 赋值）已完成；
2. 白名单比对：预先缓存所有合法选项值（如 ['MEETINGS', 'SHIPPING', 'INVOICE']），校验时检查 input.value 是否存在于该数组中；
3. 智能聚焦恢复：校验失败时，不仅 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），其本质是将输入框降级为“只读展示区”，所有有效值必须经由预定义选项注入。