使用jQuery onchange事件设置焦点至下一个表单字段

我有一个包含select元素和input字段的表单，希望select值变化时自动把焦点移到input字段。试了jQuery的focus()方法，但没效果。我的代码如下：

JS代码 #

function moveToNextField(selectElement) {
  console.log("got a call");
  $(".myField").focus("focus");
}

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="http://localhost/ibsv2/public/admin/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

<td width="80">
  <select name="tariff_code" class="form-control p-0 select2" onchange="moveToNextField(this)" id="tariff_code">
     <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>

1. 修正jQuery focus()调用 #

你的代码里focus("focus")写法错误，jQuery触发焦点不需要传参数，直接调用即可：

function moveToNextField(selectElement) {
  console.log("got a call");
  $(".myField").focus();
}

2. 适配Select2插件（推荐） #

因为你用了Select2插件，它会替换原生select，原生onchange事件可能被插件干扰。改用Select2专属事件更可靠：
先移除select标签上的onchange="moveToNextField(this)"，然后添加这段JS：

$(document).ready(function() {
  $('#tariff_code').on('select2:select', function() {
    $(".myField").focus();
  });
});

3. 原生JS实现（无需jQuery） #

如果不想用jQuery，直接用原生JS也能实现：

function moveToNextField(selectElement) {
  console.log("got a call");
  document.querySelector(".myField").focus();
}

• focus("focus")是错误用法：jQuery的focus()传参数时是绑定焦点事件的回调，不是触发焦点；触发焦点只需无参调用focus()。
• Select2插件干扰：Select2会重构原生select元素，原生onchange事件的执行时机可能被插件修改，导致焦点设置失效，用插件专属事件能避免这个问题。

内容的提问来源于stack exchange，提问作者Atiq krl1