当使用 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 插件的前提下，稳定实现下拉选择框的自动聚焦，兼顾功能完整性与用户体验一致性。
