当为使用 Chosen.js（class="chzn-select"）增强的 元素添加 autofocus 属性时，该属性会失效——这是因为 Chosen 会将原生 隐藏，并动态生成一套 DOM 结构，导致浏览器无法在页面加载时聚焦到已被隐藏的原始元素。
当为使用 chosen.js（`class="chzn-select"`）增强的 `
Chosen.js 是一款广泛使用的 jQuery 下拉增强插件，它通过替换原生
要实现页面加载后自动聚焦到 Chosen 下拉框，必须采用 JavaScript 主动触发聚焦。核心思路是：在 Chosen 初始化完成之后，调用其公开 API 方法 focus() 或手动聚焦其生成的输入框。
✅ 正确解决方案（推荐）
首先，为
<!-- 在 form 中为 select 添加 id --> <select name="product" id="product" class="chzn-select" required> <option value="">请选择产品</option> <!-- 动态选项由 PHP 生成 --> </select>
然后，在页面底部（或 DOM 加载完成后）初始化 Chosen，并显式调用 focus()：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="path/to/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="path/to/chosen.min.css">
<script>
$(document).ready(function() {
// 1. 初始化 Chosen（必须在 DOM 就绪后执行）
$('#product').chosen({
width: '300px',
no_results_text: '未找到匹配项'
});
// 2. 等待 Chosen 渲染完成（使用 setTimeout 或 chosen:ready 事件）
// 推荐方式：监听 Chosen 的 'chosen:ready' 事件
$('#product').on('chosen:ready', function() {
// 获取 Chosen 生成的搜索输入框并聚焦
const $searchField = $(this).next('.chzn-container').find('input[type="text"]');
if ($searchField.length) {
$searchField.focus();
}
});
});
</script>⚠️ 注意事项：
- 不要依赖 autofocus 属性：它对 Chosen 包装后的
- 避免过早聚焦：若在 Chosen 初始化前执行 $('#product').focus()，只会聚焦到已隐藏的原生
- 聚焦目标应为 Chosen 的搜索输入框：Chosen 会创建一个 用于搜索和交互，这才是用户实际操作的焦点区域；
- 兼容性考虑：若使用较老版本 Chosen（v1.8.7 以前），可改用 setTimeout 延迟聚焦（如 setTimeout(() => $('.chzn-search input').focus(), 100)），但事件监听方式更可靠、更优雅。
? 补充：修复原有 JS 逻辑
你当前的 handleSelectionChange 和 handleKeyPress 函数中，通过 qty、price1 等变量直接引用 DOM 元素，存在潜在错误（这些变量未声明）。建议改为通过 name 或 id 安全获取：
function handleSelectionChange(selectElement, nextFieldName) {
const nextField = document.querySelector(`[name="${nextFieldName}"]`);
if (nextField) nextField.focus();
}
function handleKeyPress(event, currentField, nextFieldName) {
if (event.key === "Enter") {
event.preventDefault();
const nextField = document.querySelector(`[name="${nextFieldName}"]`);
if (nextField) nextField.focus();
}
}并在 HTML 中为后续字段添加对应 name（如 name="qty" 已存在，无需修改）。
✅ 总结
| 问题根源 | Chosen.js 隐藏原生 |
|---|---|
| 关键步骤 | ① 初始化 Chosen → ② 监听 chosen:ready → ③ 聚焦 .chzn-search input |
| 最佳实践 | 使用事件驱动而非定时器；优先操作 Chosen 生成的 UI 元素，而非原始 |
通过上述方法，即可在保留 Chosen 强大搜索与样式能力的同时，完美实现页面加载后下拉框自动获得焦点，提升表单填写效率与用户体验。
