Изменить фокус со стрелкой

Question

Я следовал Сдвиг фокуса с помощью клавиш со стрелками в JavaScript, но у меня это не работает.
Есть ли другие способы изменить фокус между полями ввода с помощью вкладок?

$(document).keydown(function(e) {
  if (e.keyCode == 39) {
    $(".move:focus").next().focus();
  }
  if (e.keyCode == 37) {
    $(".move:focus").prev().focus();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table" class="table table-bordered table-hover dataTable" style="width:100%">
  <thead>
    <tr>
      <th>RM Code</th>
      <th style="width:10%">Wh</th>
      <th style="width:10%">Quantity<br>Recipe</th>
      <th style="width:10%">Weight/<br>Mixer</th>
      <th style="width:10%">No of<br>Weighting</th>
      <th style="width:10%">Qty Used<br>Actual</th>
    </tr>
  </thead>
  <tbody>
    <tr class="details">
      <td>
        <input type="text" id="rm_code[]" name="rm_code[]" placeholder="Enter your Name" class="form-control move" />
      </td>
      <td>
        <input type="text" id="wh[]" name="wh[]" placeholder="Enter your Name" class="form-control move" />
      </td>
      <td>
        <input type="text" id="quantity_recipe[]" name="quantity_recipe[]" placeholder="Enter your Name" class="form-control move" />
      </td>
      <td>
        <input type="text" id="weight_mixer[]" name="weight_mixer[]" placeholder="Enter your Name" class="form-control move" />
      </td>
      <td>
        <input type="text" id="no_of_weighting[]" name="no_of_weighting[]" placeholder="Enter your Name" class="form-control move" />
      </td>
      <td>
        <input type="text" id="qty_used_actual[]" name="qty_used_actual[]" placeholder="Enter your Name" class="form-control move" />
      </td>
    </tr>
  </tbody>
</table>

Answer 1

jQuery s next() выбирает "непосредственно следующий брат ". В вашем HTML элементы <input> не являются братьями и сестрами, поскольку каждый из них находится внутри собственного родителя <td>.

Однако элементы <td> являются братьями и сестрами. Таким образом, вы можете перейти от сфокусированного <input> к его содержащему <td> к следующему брату <td> к его дочернему элементу <input>.

Один метод заключается в использовании parent() для выбора текущего <td>, next() для выбора следующего брата <td> и find() для выбора дочернего элемента <input>.

Вот демонстрация:

$(document).keydown(function(e) {
  if (e.keyCode == 39) {
    $(".move:focus").parent().next().find(".move").focus();
  }
  if (e.keyCode == 37) {
    $(".move:focus").parent().prev().find(".move").focus();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table" class="table table-bordered table-hover dataTable" style="width:100%">
  <thead>
    <tr>
      <th>RM Code</th>
      <th style="width:10%">Wh</th>
      <th style="width:10%">Quantity<br>Recipe</th>
      <th style="width:10%">Weight/<br>Mixer</th>
      <th style="width:10%">No of<br>Weighting</th>
      <th style="width:10%">Qty Used<br>Actual</th>
    </tr>
  </thead>
  <tbody>
    <tr class="details">
      <td>
        <input type="text" id="rm_code[]" name="rm_code[]" placeholder="Enter your Name" class="form-control move" />
      </td>
      <td>
        <input type="text" id="wh[]" name="wh[]" placeholder="Enter your Name" class="form-control move" />
      </td>
      <td>
        <input type="text" id="quantity_recipe[]" name="quantity_recipe[]" placeholder="Enter your Name" class="form-control move" />
      </td>
      <td>
        <input type="text" id="weight_mixer[]" name="weight_mixer[]" placeholder="Enter your Name" class="form-control move" />
      </td>
      <td>
        <input type="text" id="no_of_weighting[]" name="no_of_weighting[]" placeholder="Enter your Name" class="form-control move" />
      </td>
      <td>
        <input type="text" id="qty_used_actual[]" name="qty_used_actual[]" placeholder="Enter your Name" class="form-control move" />
      </td>
    </tr>
  </tbody>
</table>

---

Если ваша структура HTML может измениться, рассмотрите более конкретные c селекторы:

$(".move:focus").closest("td").next().find(".move").focus();