Question

这是我的HTML：

<div class="add_address_section">

    <div class="address_field">
      <input type="text" class="add_address_field" name="field_name[]" value="">
      <input type="button" class="remove_address_button" value="Remove Address">
    </div>

    <div class="address_field">
      <input type="text" class="add_address_field" name="field_name[]" value="">
      <input type="button" class="remove_address_button" value="Remove Address">
    </div>
  </div>

在输入框中单击Enter后，我想关注下一个输入框。但是，这不起作用：

  $('.add_address_section').on('keyup', '.address_field', function (e) {
    if (e.keyCode == 13) {
      e.preventDefault();
      addInputField();
      var next_inbox_index = $('.address_field').index(this) + 1;
      debugger;
      $('.address_field').eq(next_inbox_index).focus();
    }
  });

任何人都知道为什么？我似乎无法让这个工作：

这似乎不起作用：

$('.address_field>input')[0]
<input type="text" class="add_address_field" name="field_name[]" value>
$('.address_field>input')[0].focus()
undefined

这就是返回值：

$('.address_field').eq(1)
w.fn.init [div.address_field, prevObject: w.fn.init(2)]
0:div.address_field
length: 1

这不起作用：

$('.address_field>input[type=text]')[1]
<input type="text" class="add_address_field" name="field_name[]" value>
$('.address_field>input[type=text]')[1].focus()
undefined

这甚至不关注第一个输入框：

$('input[type=text]')[0].focus()
undefined

这实际上似乎有效

$('.address_field input[type=text]')[next_inbox_index].focus()

显然，在控制台中，这个焦点的事情很难发挥作用。

Answer 1

由于.address_field是委托事件侦听器中的触发元素，因此无需跟踪索引。您只需使用.next()方法选择下一个.address_field。然后使用.find(input=text)选择输入并设置焦点。

$('.add_address_section').on('keyup', '.address_field', function(e) {
  if (e.keyCode == 13) {
    e.preventDefault();
    $(this).next().find('input[type=text]').focus();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="add_address_section">

  <div class="address_field">
    <input type="text" class="add_address_field" name="field_name[]" value="">
    <input type="button" class="remove_address_button" value="Remove Address">
  </div>

  <div class="address_field">
    <input type="text" class="add_address_field" name="field_name[]" value="">
    <input type="button" class="remove_address_button" value="Remove Address">
  </div>

</div>

Answer 2

我相信一旦你使用eq()将元素数量减少到一个，你仍然需要使用数组表示法来获取DOM元素而不是jquery对象。所以最后一行应该是

$('.address_field').eq(next_inbox_index)[0].focus();

Answer 3

在要关注的字段上添加 add_address_field 类

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
        <form>
        <div class="add_address_section">

    <div class="address_field">
      <input type="text" class="inputs add_address_field" name="field_name[]" value="">
      <input type="button" class="remove_address_button" value="Remove Address">
    </div>

    <div class="address_field">
      <input type="text" class="inputs add_address_field" name="field_name[]" value="">
      <input type="button" class="remove_address_button" value="Remove Address">
    </div>
  </div>
            </form>

        <script>
       $('.add_address_field').keydown(function (e) {
     if (e.which === 13) {
         var index = $('.add_address_field').index(this) + 1;
         $('.add_address_field').eq(index).focus();
     }
 });
        </script>
    </body>
</html>

Answer 4

$('.add_address_section').on('keyup', '.address_field', function (e) {
    if (e.keyCode == 13) {
      e.preventDefault();
      var next_inbox_index = $('.address_field').index(this) + 1;
      $('.address_field').eq(next_inbox_index).find('.add_address_field').focus();
    }
  });

Plunker Link：https://plnkr.co/edit/egMb58HhvuhdDf2IjcFD

按Enter键后如何关注下一个输入框。 jQuery的

4 个答案: