如何检查输入是否为空并将类应用到它？

Question

我要重新创建如下这种效果（星）： https://tympanus.net/Development/TextInputEffects/

我已经看过了这个JS和google了一下验证，但只是不明白如何让这个当我进入文本输入，标签呆在那里。在我的情况下，当我输入文本并离开输入时，标签向下移动。

Answer 1

我已经创建了一个最简单的例子，说明如何做到这一点。 在代码中查看我的意见以了解其工作原理。

$("#input").focus(function() { 
 
    // If you enter the input 
 

 
    $("#test").animate({ // Animate the text to the top 
 
    top: "20px", 
 
    }, 200, function() {}); 
 

 
}).blur(function() { 
 
    // If you left the input 
 

 
    if ($(this).val() == "") { // Only if the input is empty 
 

 
    $("#test").animate({ // Animate the text back into the input 
 
     top: "50px", 
 
    }, 200, function() {}); 
 
    } 
 
});

#box { 
 
    height: 100px; 
 
    width: 100px; 
 
    padding-top: 50px; 
 
    position: relative; 
 
} 
 

 
#test { 
 
    top: 50px; 
 
    left: 5px; 
 
    position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="box"> 
 
    <input type="text" id="input"><span id="test">Test</span> 
 
</div>

Answer 2

像这样可以不使用JavaScript的纯CSS一行中容易地实现。我在下面添加了一段代码来演示基本思想。我将required attribute用于与:valid css selector组合的输入，以检查输入是否为空。

label { 
 
    display: inline-block; 
 
    margin-top: 20px; 
 
    position: relative; 
 
} 
 

 
label > span { 
 
    position: absolute; 
 
    cursor: text; 
 
    left: 2px; 
 
    top: 1px; 
 
    transition: top .2s ease; 
 
    color: #3a3a3a; 
 
} 
 

 
label > input:focus + span, 
 
label > input:valid + span{ 
 
    top: -20px; 
 
}

<label> 
 
    <input required type="text" /> 
 
    <span>Surname</span> 
 
</label>