Question

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

Answer 1

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

Answer 2

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

＆＃13;

var $inputs = $('.input-class');


$inputs.on('keyup', function() {
  if ($(this).val().length == 2) {
    $inputs.eq($inputs.index(this) + 1).focus();
  }

});

＆＃13;

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

＆＃13;

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

＆＃13;

var $inputs = $('.input-class');


$inputs.on('keyup', function() {
  if ($(this).val().length == 2) {
    $($(this).data('next')).focus();
  }

});

＆＃13;

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

＆＃13;

这只是＆＃34;转到下一个＆＃34;代码，不执行验证。

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

2 个答案: