本文详解如何在 select 元素值变更时，使用 jQuery 正确触发 input 输入框的焦点获取，重点纠正 focus() 方法误用、选择器冗余及 DOM 就绪时机等常见问题，并提供可直接运行的优化代码。
本文详解如何在 select 元素值变更时，使用 jquery 正确触发 input 输入框的焦点获取，重点纠正 `focus()` 方法误用、选择器冗余及 dom 就绪时机等常见问题，并提供可直接运行的优化代码。
在表单交互开发中，常需实现“选择即跳转”的用户体验——例如用户从下拉菜单（
✅ 正确做法：精准选择 + 无参调用 + 确保 DOM 就绪
首先，$().focus() 是一个无参方法，用于触发元素获得焦点；传入字符串 "focus"（如 .focus("focus")）是错误用法，该签名并不存在于 jQuery API 中，会导致静默失败。
其次，应优先使用 ID 选择器（如 #app_number）而非类选择器（如 .myField），原因有三：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
- ID 唯一性强，避免多元素干扰；
- 性能更优（原生 getElementById 快于 getElementsByClassName）；
- 语义清晰，与 HTML 中明确的 id="app_number" 严格对应。
最后，确保脚本执行时目标元素已存在于 DOM 中。若将 JavaScript 写在
中且未包裹在 $(document).ready() 或 DOMContentLoaded 回调内，可能因元素尚未加载而获取不到节点。✅ 推荐实现代码（含健壮性增强）
<!-- 引入 jQuery（建议使用 CDN 稳定版本） -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 表单结构（保持原有语义与 ID） -->
<table>
<tr>
<td width="80">
<select
name="tariff_code"
class="form-control p-0 select2"
id="tariff_code">
<option value="">请选择</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</td>
<td>
<input
type="text"
placeholder="Number"
name="app_number"
class="form-control p-0 myField"
minlength="7"
maxlength="7"
id="app_number"
required>
</td>
</tr>
</table>
<!-- 推荐：使用事件委托 + DOM 就绪保障 -->
<script>
$(document).ready(function() {
$('#tariff_code').on('change', function() {
console.log('Select value changed → focusing #app_number');
$('#app_number').focus();
});
});
</script>? 关键改进说明：
- 使用 $('#tariff_code').on('change', ...) 替代内联 onchange="..."，解耦 HTML 与 JS，提升可维护性；
- 包裹在 $(document).ready() 中，确保 DOM 完全加载后再绑定事件；
- 移除冗余参数，直接调用 $('#app_number').focus()；
- 添加默认空选项，避免初始误触发。
⚠️ 注意事项与常见陷阱
- 移动端兼容性：部分 iOS Safari 版本对非用户手势触发的 focus() 有限制（如需弹出软键盘，必须由真实点击/触摸触发）。若需强兼容，可结合 setTimeout 微延迟或监听 touchend/click 后再聚焦。
- 无障碍访问（a11y）：自动聚焦可能打断屏幕阅读器流程。如面向通用用户，建议仅在明确业务场景（如向导式表单）中启用，并通过 aria-live 提示状态变化。
-
Bootstrap Select2 干扰：若使用 Select2 插件，原生 change 事件可能被拦截。此时应监听 Select2 的 select2:select 事件：
$('#tariff_code').on('select2:select', function() { $('#app_number').focus(); });
✅ 总结
实现 select 变更后自动聚焦，核心在于三点：正确调用 .focus()（无参）、精准定位目标元素（推荐 ID）、确保事件绑定时机（DOM 就绪）。摒弃内联 JavaScript，采用 jQuery 事件委托方式，不仅代码更简洁，也更易测试与扩展。实际项目中，还可进一步封装为可复用函数，支持动态配置目标字段 ID，提升组件化能力。
