Анимированная форма, как проверить входное значение на странице обновления?

Question

У меня есть форма, которая использует динамический стиль. Рассмотрим этот html

<div class="field-name field-form-item"> 
     <label class="placeholder" for="name">Name</label> 
     <input class="form-input" id="name" type="text" name="name" maxlength="50" size="30"> 
    </div> 

Метка ВЫШЕ вход с помощью CSS. Когда вы нажимаете на метку:

$('.placeholder').on('click focus', function() { 
    $(this).addClass('ph-activated'); 
    $(this).siblings('input').focus(); 
}) 

Затем метка анимируется и позволяет пользователю вводить ввод.

Если пользователь Dont wan't писать что-либо, анимация возвращается, и скрыть поле ввода:

$('input').on(' blur', function(){ 
    if ($(this).val().length === 0) { 
     $(this).siblings('label').removeClass('ph-activated'); 
    } 
}); 

Это хорошо.

Но когда пользователь заполнит ввод, ТОГДА обновите страницу, и ее браузер не сбросил поля ввода (то есть firefox): метка над входом, даже если последнее не пустое.

Я попытался это:

$(document).ready(function() { 
    if ($('input').val().length) { 
     $(this).siblings('label').addClass('ph-activated'); 
    } 
}) 

Но это, кажется, не вызывают, я попробовал несколько способов, чтобы написать эту функцию. До сих пор мне не удалось присвоить класс ph-activated ярлыку с заполненным вводом на обновление страницы.

Извините, я не могу это поиграть. Я просто слишком много HTML/CSS/JS/PHP для копирования вставки

Answer 1

Ну вы ориентируетесь неправильно element в $(document).ready, потому что вы имеете в виду label с this думать, что $(this) является input тогда как document. Так попробуйте применить ниже код, и я надеюсь, что будет несколько input элементов страницы, так что я использовал $.each и перекручивания через все inputs

$(document).ready(function() { 
    $('input').each(function(){ //loop through each inputs 
     if ($(this).val().length) { 
      $(this).siblings('label').addClass('ph-activated'); 
     } 
    }); 
}) 

DEMO - Проверьте label и вы найдете добавил ph-activated класса в label

Answer 2

Попробуйте это:

$(document).ready(function() { 
    var length = $('input').filter(function(index) { 
     return ($(this).val() !== ''); 
    }).length; 

    if (length > 0) { 
     $(this).siblings('label').addClass('ph-activated'); 
    } 
})