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

Posted 2023-02-25

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

【英文标题】：Focusing on next input not working and how to submit the form when user on last input field

【发布时间】：2017-09-26 08:28:51

【问题描述】：

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

【问题讨论】：

下一个<input> 不是immediately following sibling。您将必须遍历其 parent 元素，获取其紧随其后的兄弟元素，然后 contains 您正在寻找的 <input>。

【参考方案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>

【讨论】：

我检查了你的输出，我只能输入三个字段

一些变化，检查一下。

感谢回复，我在控制台遇到错误 nextField.children(...)[0] is undefined

现在检查一下，有些错别字。

当我输入最后一个字段时出现错误