Разное поведение input на десктопе и в режиме адаптива

Question

Всем привет. Есть 4 input. При вводе цифры в один input фокус перескакивает на другой, при стирании на backspace то же самое только в обратном порядке. В режиме адаптива при стирании все работает как надо. В режиме десктопа при стирании, когда доходим до первого input почему-то происходит скролл вниз страницы. Как это пофиксить?

$(() => {
  $('.referral-input:first-child').focus();

  $('.referral-input').on('keydown', function(e) {
    let value = $(this).val();
    let len = value.length;
    let curTabIndex = parseInt($(this).attr('tabindex'));
    let nextTabIndex = curTabIndex + 1;
    let prevTabIndex = curTabIndex - 1;
    if (len > 0) {
      $(this).val(value.substr(0, 1));
      $('[tabindex=' + nextTabIndex + ']').focus();
    } else if (len == 0 && prevTabIndex !== 0) {
      $('[tabindex=' + prevTabIndex + ']').focus();
    }
  });

  $('.referral-input:last-child').on('keyup', function(e) {
    if ($(this).val() != '') {
      $('.referral-link__link').addClass('done')
    } else {
      $('.referral-link__link').removeClass('done')
    }
  })


});

.referral-link__label font-size 12px font-weight 300 padding-bottom 6px .referral-link__wrap display flex flex-direction column padding 0 17em justify-content center .referral-link__item display flex flex-wrap wrap justify-content space-between margin 0 auto padding 0 background transparent transition opacity 0.3s ease .referral-link__item input width 100% flex 0 0 24% padding 0 margin 0 text-align center min-height 50px border-radius 6px font-size 2em font-weight bold color $lightGold box-shadow none outline none border none .referral-link__item input:not(:first-child) margin-left 1% .referral-link__link text-align center margin-top 0 height 0 opacity 0 transition opacity 0.3s ease .referral-link__link.done margin-top 40px height auto opacity 1 .form-rows padding 0 17em justify-content center margin-top 40px .page-btn margin-top 30px

<div class="referral-link__wrap">
  <div class="referral-link__label">Введите 4 цифры</div>
  <div class="referral-link__item">
    <input class="referral-input" type="tel" maxlength="1" tabindex="1">
    <input class="referral-input" type="tel" maxlength="1" tabindex="2">
    <input class="referral-input" type="tel" maxlength="1" tabindex="3">
    <input class="referral-input" type="tel" maxlength="1" tabindex="4">
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

БЛОГ НА HUSL

Разное поведение input на десктопе и в режиме адаптива

Ответы (0 шт):