Question

我正在使用WordPress建立一个网站，并使用Contact Form 7作为表单构建器。

我想为输入标签创建自定义动画。没有任何交互，标签位于输入内部。在焦点上，标签向上滑动以使输入清除输入值。如果输入保持为空，则在对焦时，标签会再次滑回到原始位置，否则，它将保持在原位。

动作效果很简单，我已经完成了。问题是值检查，看输入是否为空。这是我的jQuery：

jQuery(document).ready(function($) {
    var cinput = $('.placeholder-animation input.animate-label');
    var clabel = $('.placeholder-animation span.custom-label');

    cinput.each(function() {
        if(cinput.val() === "") {
            console.log('Up!');
            cinput.focus(function() { clabel.addClass('up'); }).focusout(function() { clabel.removeClass('up'); });
        } else {
            clabel.addClass('up');
            console.log('Always up!');
        }
    });
})

发生的事情是，即使我在输入中写入任何值并离开它，标签也会滑回输入，就像它保持为空。我已经尝试了几种解决方案而没有任何积极的结果...

需要帮助！ :)谢谢！

Answer 1

您只能使用CSS3。

您需要在输入后将输入放在标签和范围内，然后使用:focus选择器：

input:focus + span {
 /*label css here*/
}

编辑：这是一个笔示例：https://codepen.io/MaxViewUp/pen/xrbdxm

如果你只能用css（可能是因为插件而在字段周围包装）你不能这样做，那么你可以使用jQuery来添加/删除类。然后，仅将类选择器添加到活动标签

编辑：您还需要一些JS来检测填充字段（直到css更新）。立即检查笔

表单输入标签动画

1 个答案: