javascript - 动画形式，如何检查页面刷新时的输入值？

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();
})

然后标签是动画的，让用户输入。

如果用户不想写任何东西，动画返回，并隐藏输入框:

$('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

那么你在 $(document).ready 中定位了错误的 element 因为你引用 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