Broser预填充输入字段，但在页面加载后

Question

我已经为输入的浮动标签开发了自己的代码。工作正常，但在浏览器在页面加载时预填输入时无法正常工作。

function checkInputsValue() {
  $('.input-box').each(function() {
    $input = $(this).find('input');
    if ($input.val() == '') {
      moveLabelDown($input);
    }
    else {
      moveLabelUp($input);
    }
  });
}

我在准备好文档时触发此jquery。问题在于，即使页面未完全加载时，输入值在页面加载时仍为空。 就像浏览器仅在jquery ready事件之后才填充输入。即使在函数上设置超时也不能解决问题，因为它看起来像是在超时延迟之前进行了检查。

使用片段编辑

$(document).ready(function() {

  function moveLabelUp(input) {
    $input = input;
    $input.parent().addClass('filled');
  }

  function moveLabelDown(input) {
    $input = input;
    $input.parent().removeClass('filled');
  }

  function checkInputsValue() {
    $('.input-box').each(function() {
      $input = $(this).find('input');
      if ($input.val() == '') {
        moveLabelDown($input);
      }
      else {
        moveLabelUp($input);
      }
    });
  }

  checkInputsValue();

  $('input, textarea').focus(function() {
    $this = $(this);
    moveLabelUp($this);
  });

  $('input, textarea').blur(function() {
    $this = $(this);
    if ($input.val() == '') {
      moveLabelDown($this);
    }
  });

  $('select').parent('.input-box').append('<div class="select-arrow"></div>');

});

.input-box {
  top: 0;
  left: 0;
  position: relative;
  &.filled {
    label {
      font-size: 1.2rem !important;
      top: 6px !important;
      transform: none !important;
    }
  }
  input, textarea, select {
    background-color: $primary;
    color: $tertiary !important;
    font-size: 1.4rem;
    width: 100%;
    // Cover chrome autocomplete styles application
    -webkit-box-shadow: 0 0 0px 1000px $primary inset;
    -webkit-text-fill-color: $tertiary;
  }
  input, select {
    @extend .rounded-max;
    height: 50px;
    padding: 18px 25px 0 25px;
    & + label {
    top: 50%;
    left: 25px;
    transform: translateY(-50%);
    }
  }
  textarea {

  }
  select {
    padding-left: 20px;
    padding-right: 20px;
    & + label {
      pointer-events: none;
    }
    & ~ .select-arrow {
      width: 16px;
      height: 8px;
      position: absolute;
      top: 50%;
      right: 20px;
      pointer-events: none;
      transform: translateY(-50%);
      background: image-url('icons/arrow-down.svg') no-repeat center/contain;
      transition: transform 0.2s;
    }
  }
  label {
    position: absolute;
    font-size: 1.4rem;
    color: $tertiary;
    transition: font-size 0.2s, top 0.2s, transform 0.2s;
    cursor: text;
  }
}

<div class="input-box filled my-4">
  <%= form.text_field :username %>
  <%= form.label :username %>
</div>

<div class="input-box filled my-4">
  <%= form.password_field :password %>
  <%= form.label :password %>
</div>