本文详解如何在 select 元素值变更时，使用 jquery 正确触发 input 输入框的焦点获取，重点纠正 focus() 方法误用、选择器冗余及 dom 就绪时机等常见问题，并提供可直接运行的优化代码。
本文详解如何在 select 元素值变更时，使用 jquery 正确触发 input 输入框的焦点获取，重点纠正 `focus()` 方法误用、选择器冗余及 dom 就绪时机等常见问题，并提供可直接运行的优化代码。
在表单交互开发中，常需实现“选择即跳转”的用户体验——例如用户从下拉菜单（
✅ 正确做法：精准选择 + 无参调用 + 确保 DOM 就绪
首先，$().focus() 是一个无参方法，用于触发元素获得焦点；传入字符串 “focus”（如 .focus(“focus”)）是错误用法，该签名并不存在于 jQuery API 中，会导致静默失败。
其次，应优先使用 ID 选择器（如 #app_number）而非类选择器（如 .myField），原因有三：
- 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，提升组件化能力。