jquery - 表单输入标签动画

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 更新)。现在检查笔