next().focus() 仅适用于相同类型的控件

Question

我正在尝试让表单中的 Enter 键将焦点移至下一个控件。我有几个文本框、复选框和按钮。他们都得到了class='ctrl'。这段代码完成了大部分工作。

$(document).on('keydown', '.ctrl', function(e) {
    if (e.keyCode==13) {
      $(this).next().focus();
    }
})

.ctrl {
  display:block 
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="ctrl" type="text" id="fname" name="fname">
<input class="ctrl" type="text" id="mname" name="mname">
<input class="ctrl" type="text" id="lname" name="lname"><br>
<input class="ctrl" id="check1" type="checkbox">Select 1
<input class="ctrl" id="check2" type="checkbox">Select 2
<input class="ctrl" id="check3" type="checkbox">Select 3
<button type="button" class="ctrl" ;">Done</button>

但是如果一个文本框获得了焦点，它只会跳转到其他文本框。如果一个复选框获得焦点，它只会跳转到其他复选框，依此类推。我希望 et 像 TAB 键一样工作。

Answer 1

您可以获取发生按键事件的 class 的索引，然后向其添加 1 以获得相同 class 的下一个索引，然后使用 $(this).closest('div').find('.ctrl:eq(' + index + ')') 进行聚焦下一个输入。

演示代码 :

$(document).on('keydown', '.ctrl', function(e) {
  var length = $(".ctrl").length //get length
  var index = $(".ctrl").index(this) + 1; //get index of class
  if (e.keyCode == 13) {
  //if index is less
    if (index < length) {
      //get closest div find class with same index
      $(this).closest('div').find('.ctrl:eq(' + index + ')').focus();
    } else {
    //focus first input
    $(this).closest('div').find('.ctrl:eq(0)').focus();
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input class="ctrl" type="text" id="fname" name="fname">
  <input class="ctrl" type="text" id="mname" name="mname">
  <input class="ctrl" type="text" id="lname" name="lname"><br>
  <input class="ctrl" id="check1" type="checkbox">Select 1
  <input class="ctrl" id="check2" type="checkbox">Select 2
  <input class="ctrl" id="check3" type="checkbox">Select 3
  <button type="button" class="ctrl">Done</button>
</div>

next().focus() 仅适用于相同类型的控件

next().focus() only works for controls of same type

jquery

focus