本文介绍如何在用户离开 <input> 字段前强制其从动态过滤的 <ul> 列表中选择有效选项，避免手动输入无效值（如 mee），通过延迟检测 + 焦点控制实现即时、友好的客户端验证。
本文介绍如何在用户离开 `` 字段前强制其从动态过滤的 `
- ` 列表中选择有效选项，避免手动输入无效值（如 `mee`），通过延迟检测 + 焦点控制实现即时、友好的客户端验证。
在构建数据敏感型表单（如工单系统、任务录入页）时，仅靠提交时校验往往滞后——用户已填写完其他字段才被告知“订单号无效”，体验差且易引发重复操作。理想方案是在用户离开该输入框的瞬间，即刻判断其是否真正选择了预设选项（而非自行键入未匹配内容），并及时干预。
核心逻辑并非简单监听 blur，而是解决一个经典竞态问题：当用户点击列表项时，input 先触发 blur，但此时 input.value 尚未被脚本更新（尤其若列表项点击事件是异步或稍晚执行），导致误判为“未选择”。
✅ 正确实现路径如下：
输入时动态过滤并显示列表
监听 input 事件，实时匹配选项并渲染 <ul> 中的 <li>（建议使用 textContent 或 dataset.value 存储原始值，避免 HTML 注入风险）。-
列表项点击时同步赋值并关闭列表
立即学习“前端免费学习笔记（深入）”；
myList.addEventListener('click', function(e) { if (e.target.tagName === 'LI') { myInputField.value = e.target.textContent.trim(); myList.style.display = 'none'; myInputField.focus(); // 可选：保持焦点便于继续操作 } }); -
blur 事件中延迟校验（关键！）
使用 setTimeout(..., 0) 或 requestIdleCallback 让浏览器完成 DOM 更新后再检查：myInputField.addEventListener('blur', function() { setTimeout(() => { const inputValue = myInputField.value.trim(); const validOptions = Array.from(myList.querySelectorAll('li')) .map(li => li.textContent.trim()); if (!validOptions.includes(inputValue)) { alert('请从下拉列表中选择有效订单号'); myInputField.focus(); myInputField.select(); // 高亮文本便于重输/重选 } }, 0); });
⚠️ 注意事项：
- 不要依赖 window.getComputedStyle(...).display 判断列表是否“可见”——CSS 动画、visibility: hidden 或 opacity: 0 均会导致误判；应维护一个布尔状态变量（如 isDropdownOpen = true/false）并在显隐逻辑中同步更新。
- 若表单含多个同类字段（如多个需下拉选择的输入框），建议封装为可复用函数，传入 inputEl, listEl, optionsArray 参数。
- 移动端需额外处理 touchend 与 blur 的时序差异，可增加 pointerdown 监听或使用 focusout 事件替代。
最终效果：用户输入 mee → 列表显示 MEETINGS → 点击后输入框值变为 MEETINGS → 离开时无提示；若直接敲回车或 Tab 跳出，则立即弹窗提醒并聚焦回原输入框。验证前置、逻辑清晰、体验可控。
