当使用 Chosen（或类似 select2）等下拉增强插件时，原生 autofocus 属性会失效，需通过 JavaScript 在 dom 加载完成后手动调用 focus() 方法实现焦点自动获取。
当使用 chosen（或类似 select2）等下拉增强插件时，原生 `autofocus` 属性会失效，需通过 javascript 在 dom 加载完成后手动调用 `focus()` 方法实现焦点自动获取。
在 Web 表单开发中，为提升用户体验，常需在页面加载后自动将焦点定位到首个可交互字段（如
✅ 正确解决方案：延迟聚焦 + 显式 ID 引用
关键在于：不能依赖 autofocus 属性，而应通过 JavaScript 主动聚焦；且必须确保聚焦操作发生在 Chosen 初始化之后。
步骤 1：为 select 添加唯一 ID
修改你的
<select name="product" id="product" onchange="handleSelectionChange(this, qty)" style="width:300px;" class="chzn-select" required> <option value="">— 请选择产品 —</option> <!-- PHP 动态选项保持不变 --> </select>步骤 2：在 DOM 就绪后执行聚焦（推荐方式）
将聚焦逻辑封装在 DOMContentLoaded 事件中，确保 Chosen 已完成渲染（假设你已在页面底部或通过 $(document).ready() 初始化 Chosen）：
<script type="text/javascript"> // 确保在 DOM 加载完成且 Chosen 初始化后执行 document.addEventListener('DOMContentLoaded', function() { const selectEl = document.getElementById('product'); if (selectEl && typeof jquery !== 'undefined' && $.fn.chosen) { // 方案 A：聚焦 Chosen 生成的容器（更符合用户预期） setTimeout(() => { const chosenContainer = selectEl.closest('.chzn-container') || document.querySelector('.chzn-container:last-child'); if (chosenContainer) { const searchField = chosenContainer.querySelector('.chzn-search input'); if (searchField) searchField.focus(); } }, 100); } else { // 方案 B：退回到原生 select（兼容性兜底） selectEl.focus(); } }); function handleSelectionChange(selectElement, nextField) { nextField.focus(); } function handleKeyPress(event, currentField, nextField) { if (event.key === "Enter") { event.preventDefault(); nextField.focus(); } } </script>⚠️ 注意：若你使用 jQuery Chosen，其默认不将原生
步骤 3：验证 Chosen 初始化时机（重要！）
确保 Chosen 初始化代码 早于 上述聚焦逻辑执行，例如：
<!-- 在聚焦脚本之前引入并初始化 Chosen --> <link rel="stylesheet" href="chosen.min.css"> <script src="jquery.min.js"></script> <script src="chosen.jquery.min.js"></script> <script> $(function() { $(".chzn-select").chosen({ width: "300px", no_results_text: "未找到匹配项" }); }); </script>? 补充说明与最佳实践
-
为什么 autofocus 失效？
Chosen 通过 display: none 隐藏原 -
为何用 setTimeout？
Chosen 初始化是异步的，即使在 DOMContentLoaded 中，也可能尚未完成 DOM 替换。100ms 延迟可稳妥覆盖多数场景（生产环境建议监听 chosen:ready 事件替代硬编码延时）。 -
进阶建议：监听 Chosen 专属事件
$(selectEl).on('chosen:ready', function() { const searchInput = $(this).closest('.chzn-container').find('.chzn-search input'); searchInput.focus(); }); -
无障碍（a11y）提示：为保障屏幕阅读器体验，建议为 Chosen 容器添加 aria-label 或关联 label[for=”product”]。
通过以上调整，即可在启用 Chosen 插件的前提下，稳定实现下拉选择框的自动聚焦，兼顾功能完整性与用户体验一致性。