专注于下一个输入不起作用以及当用户在最后一个输入字段时如何提交表单

Question

我有 6 个文本字段，每个字段都有 maxlength=1。我使用了脚本，只有用户可以输入号码。输入数字后，光标会转到下一个字段，其他字段也会出现同样的情况，但是当光标在最后一个字段上时，我必须调用 AJAX 提交数据。

我在这里面临两个问题

1) 如何在下一个输入字段设置自动对焦？

2) 用户输入Last字段时如何提交表单

我尝试了下面的代码

/*max filed value  is only 1 and it will redirect on next field*/
$(".child").keyup(function() {
  if (this.value.length == this.maxLength) {
    $(this).next('.child').focus();
  }
});

/*Below script is use for stop the letter and can only use number in the field*/
$(function() {
  $('.confirm-field').on('keydown', '.child', function(e) {
    -1 !== $.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) || /65|67|86|88/.test(e.keyCode) && (!0 === e.ctrlKey || !0 === e.metaKey) || 35 <= e.keyCode && 40 >= e.keyCode || (e.shiftKey || 48 > e.keyCode || 57 < e.keyCode) && (96 > e.keyCode || 105 < e.keyCode) && e.preventDefault()
  });
})

/*ajax calling*/
$(function() {
  $('form[name="user-confirmation-code"]').on('submit', function(e) {
    e.preventDefault();
    $.ajax({
      type: 'post',
      url: 'demo2.php',
      data: $('form[name="user-confirmation-code"]').serialize(),
      success: function() {
        alert('form was submitted');
      }
    });
  });
});

.confirmation-box {
  display: flex;
}

.confirmation-code {
  display: inline-flex;
}

.confirmation-code input[type="text"] {
  width: 30px;
  height: 30px;
}

.confirmation-code-dash {
  display: table-cell;
  font-weight: 700;
  font-size: 2rem;
  text-align: center;
  padding: 0 .5rem;
  width: 2rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<form action="#" method="post" name="user-confirmation-code">
  <div class="confirmation-box">
    <div class="confirmation-code">
      <div class="confirm-field">
        <input type="text" name="" maxlength="1" class="child" autofocus>
      </div>
      <div class="confirm-field">
        <input type="text" name="" maxlength="1" class="child">
      </div>
      <div class="confirm-field">
        <input type="text" name="" maxlength="1" class="child">
      </div>
    </div>
    <div class="confirmation-code-dash">-</div>
    <div class="confirmation-code">
      <div class="confirm-field">
        <input type="text" name="" maxlength="1" class="child">
      </div>
      <div class="confirm-field">
        <input type="text" name="" maxlength="1" class="child">
      </div>
      <div class="confirm-field">
        <input type="text" name="" maxlength="1" class="child">
      </div>
    </div>
  </div>
  <!--confirmation-box-->
</form>

没有父类的情况下自动对焦

$(".inputs").keyup(function () {
    if (this.value.length == this.maxLength) {
      $(this).next('.inputs').focus();
    }
});

input { width: 30px; margin: 5px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input class="inputs" type="text" maxlength="1" />
<input class="inputs" type="text" maxlength="1" />
<input class="inputs" type="text" maxlength="1"/>
<input class="inputs" type="text" maxlength="1"/>
<input class="inputs" type="text" maxlength="1"/>

Answer 1

jquery next 仅检查当前父级，因此您必须在正确的位置使用它。 检查此代码：

/*max filed value  is only 1 and it will redirect on next field*/
$(".child").keyup(function () {
 if (this.value.length == this.maxLength) {
     var nextField = $(this).parent().next('.confirm-field');
    if (nextField.length==0) {
        nextField = $(this).parent().parent().next('.confirmation-code-dash').next('.confirmation-code').children('.confirm-field').first();
        if (nextField.length!=0) {
              nextField.children('.child')[0].focus();
        } else {
            // it is last field in the form so submit the form
            $("form[name='user-confirmation-code']").submit();
        }
    } else {
       $(this).parent().next('.confirm-field').children('.child')[0].focus();
    }
}
});

	/*Below script is use for stop the letter and can only use number in the field*/
$(function() {
  $('.confirm-field').on('keydown', '.child', function(e){-1!==$.inArray(e.keyCode,[46,8,9,27,13,110,190])||/65|67|86|88/.test(e.keyCode)&&(!0===e.ctrlKey||!0===e.metaKey)||35<=e.keyCode&&40>=e.keyCode||(e.shiftKey||48>e.keyCode||57<e.keyCode)&&(96>e.keyCode||105<e.keyCode)&&e.preventDefault()});
})

/*ajax calling*/
$(function () {
$('form[name="user-confirmation-code"]').on('submit', function (e) {
e.preventDefault();
 $.ajax({
type: 'post',
  url: 'demo2.php',
 data: $('form[name="user-confirmation-code"]').serialize(),
success: function () {
alert('form was submitted');
            }
          });
 
        });
 
      });

    .confirmation-box{
  display: flex;
}
.confirmation-code{
display: inline-flex;
  }
.confirmation-code input[type="text"]
  {
 width: 30px;
 height: 30px;
 }
    .confirmation-code-dash{
    display: table-cell;
    font-weight: 700;
    font-size: 2rem;
    text-align: center;
    padding: 0 .5rem;
    width: 2rem;
    		}

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  
  <form action="#" method="post" name="user-confirmation-code">
	<div class="confirmation-box">
<div class="confirmation-code">

<div class="confirm-field">
<input type="text" name="" maxlength="1" class="child" autofocus>
</div>

<div class="confirm-field">
<input type="text" name="" maxlength="1" class="child">
</div>

<div class="confirm-field">
<input type="text" name="" maxlength="1" class="child">
</div>
</div>

<div class="confirmation-code-dash">-</div>
<div class="confirmation-code">
<div class="confirm-field">
<input type="text" name="" maxlength="1" class="child">
</div>

<div class="confirm-field">
<input type="text" name="" maxlength="1" class="child">
</div>

<div class="confirm-field">
<input type="text" name="" maxlength="1" class="child">
</div>
</div>
</div><!--confirmation-box-->
</form>