Question

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

我在这里遇到两个问题

1）如何在下一个输入栏上设置自动对焦？

2）当用户输入最后一个字段时如何提交表单

我尝试过belwo代码

＆＃13;

/*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');
      }
    });
  });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

没有父类正在进行自动对焦

＆＃13;

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

＆＃13;

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

＆＃13;

<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"/>

＆＃13;

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>

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

1 个答案: