动画表单，如何在页面刷新时检查输入值

Animated form, how to check input value on page refresh?

本文关键字：刷新 检查 输入 表单 动画      更新时间：2023-09-26

我有一个使用动态样式的表单。考虑这个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太多了，没法复制粘贴

嗯，你在$(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

试试这个:

$(document).ready(function() {
    var length = $('input').filter(function( index ) {
      return ($(this).val() !== '');
    }).length;
    if (length > 0) {
        $(this).siblings('label').addClass('ph-activated');
    }
})
相关文章：