jquery 用于OTP输入字段仅当所有6位数字都已填充时才启用按钮

0s7z1bwu 于 2024-01-07 发布在 jQuery

关注(0)|答案(3)|浏览(126)

我有一个OTP表单字段，有一个禁用的“确认”按钮。该按钮应启用时，只有所有6位数字都填写。

的数据
超文本标记语言：

<div id="otp" class="flex form-otp text-center pb-3">
    <input class="text-center form-control" type="text" id="digit-1" name="digit-1" data-next="digit-2" maxlength="1" />
    <input class="text-center form-control" type="text" id="digit-2" name="digit-2" data-next="digit-3" data-previous="digit-1" maxlength="1" />
    <input class="text-center form-control" type="text" id="digit-3" name="digit-3" data-next="digit-4" data-previous="digit-2" maxlength="1" />
    <input class="text-center form-control" type="text" id="digit-4" name="digit-4" data-next="digit-5" data-previous="digit-3" maxlength="1" />
    <input class="text-center form-control" type="text" id="digit-5" name="digit-5" data-next="digit-6" data-previous="digit-4" maxlength="1" />
    <input class="text-center form-control" type="text" id="digit-6" name="digit-6" data-previous="digit-5" maxlength="1" />
</div>
<button type="submit" class="btn js-otp-confirm disabled"> confirm </button>

字符串
我已经尝试了下面的jQuery代码使用**.is（'：empty'）**，但它不工作.有人能指导我在这里我做错了什么。

$('.form-otp').find('input').each(function() {
    $(this).on('keyup', function(e) {
        var parent = $($(this).parent());
            if(e.keyCode === 8 || e.keyCode === 37) {
                var prev = parent.find('input#' + $(this).data('previous'));
                if(prev.length) {
                    $(prev).select();
                }
            } else if((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 65 && e.keyCode <= 90) || (e.keyCode >= 96 && e.keyCode <= 105) || e.keyCode === 39) {
                var next = parent.find('input#' + $(this).data('next'));
                if(next.length) {
                    $(next).select();
                }
            }
        if ($(this).is(':empty')) {
            $('.js-otp-confirm').addClass('disabled');
        } else {
            $('.js-otp-confirm').removeClass('disabled');
        }
    });
});

型

jquery

来源：https://stackoverflow.com/questions/65310007/for-otp-input-field-enable-the-button-only-when-all-6-digits-are-filled

3条答案

按热度按时间

eoxn13cs1#

下面是我更新的脚本

$('.form-otp').find('input').each(function() {
    $(this).on('keyup', function(e) {
      var parent = $($(this).parent());
      if (e.keyCode === 8 || e.keyCode === 37) {
        var prev = parent.find('input#' + $(this).data('previous'));
        if (prev.length) {
          $(prev).select();
        }
      } else if ((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 65 && e.keyCode <= 90) || (e.keyCode >= 96 && e.keyCode <= 105) || e.keyCode === 39) {
        var next = parent.find('input#' + $(this).data('next'));
        if (next.length) {
          $(next).select();
        }
      }
      var counter = 0;
      $('.form-otp').find('input').each(function() {
        if ($(this).val() == '') {
          counter++;
        } else {
        }
      });
      if (counter > 0) {
        $('.js-otp-confirm').addClass('disabled');
      } else {
        $('.js-otp-confirm').removeClass('disabled');
      }
    });
  });

字符串

展开查看全部

赞(0）回复(0）举报 2024-01-07

ppcbkaq52#

使用每个验证。

$(document).ready(function(){
  var count = 0;
  $('.otp').change(function(){
  $('#otp input[type=text]').each(function(){
      if($(this).val().length !== 0) {
          count = count + 1;
       }
  });
  if(count === 21){
    $('#btn-active').removeClass('disabled');
  } else {
    $('#btn-active').addClass('disabled');
  }
  })
});

个字符

展开查看全部

赞(0）回复(0）举报 2024-01-07

wbrvyc0a3#

解决了1行过滤功能。

$('.muse-otp').find('input').each(function () {
    $(this).on('keyup', function (e) {
        var parent = $($(this).parent());
        if (e.keyCode === 8 || e.keyCode === 37) {
            var prev = parent.find('input#' + $(this).data('previous'));
            if (prev.length) {
                $(prev).select();
            }
        } else if ((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 65 && e.keyCode <= 90) || (e.keyCode >= 96 && e.keyCode <= 105) || e.keyCode === 39) {
            var next = parent.find('input#' + $(this).data('next'));
            if (next.length) {
                $(next).select();
            }
        }
        if ($('.muse-otp').find('input').filter(function () { return this.value === ''; }).length === 0) {
            $('.js-otp-confirm').removeClass('disabled');
        } else {
            $('.js-otp-confirm').addClass('disabled');
        }
    });
});

字符串

展开查看全部

赞(0）回复(0）举报 2024-01-07

我来回答

jquery 用于OTP输入字段仅当所有6位数字都已填充时才启用按钮

3条答案

相关问题

热门标签

最新问答