Javascript UK 使用三个输入字段进行排序代码验证

Javascript UK Sort code validation with three input field

本文关键字：字段 输入 排序 验证 代码 三个 UK Javascript      更新时间：2023-09-26

我有一个付款页面，其中有三个称为排序代码的字段，每个字段可以有 2 个两位数我想编写 java 脚本代码来验证此字段，当用户在第一个字段中键入 2 位数字时，它应该跳转到下一个字段。 如何验证静态排序代码。

$('.input').on('keyup', function(e) {
    if ($(this).length == 2) {
        $('.next-input').focus();
    }
}

您必须创建输入的集合，并在键入第二个字母后继续执行集合中的下一项。

var $inputs = $('.input-class');
$inputs.on('keyup', function() {
  if ($(this).val().length == 2) {
    $inputs.eq($inputs.index(this) + 1).focus();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
  <table>
    <tr>
      <td>
        <input type="text" class="input-class input-1">
      </td>
      <td>
        <input type="text" class="input-class input-2">
      </td>
      <td>
        <input type="text" class="input-class input-3">
      </td>
      <td>
        <input type="text" class="input-class input-4">
      </td>
      <td>
        <input type="text" class="input-class input-5">
      </td>
    </tr>
  </table>
</form>

如果您想要更精细的解决方案，您可以将下一个输入的选择器添加为data-attribute

var $inputs = $('.input-class');
$inputs.on('keyup', function() {
  if ($(this).val().length == 2) {
    $($(this).data('next')).focus();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
  <table>
    <tr>
      <td>
        <input type="text" class="input-class input-1" data-next=".input-3">
      </td>
      <td>
        <input type="text" class="input-class input-2" data-next=".input-4">
      </td>
      <td>
        <input type="text" class="input-class input-3" data-next=".input-5">
      </td>
      <td>
        <input type="text" class="input-class input-4" data-next=".input-1">
      </td>
      <td>
        <input type="text" class="input-class input-5" data-next=".input-2">
      </td>
    </tr>
  </table>
</form>

这只是"转到下一个"代码，不执行任何验证。

相关文章：