如何檢查輸入是否爲空並將類應用到它？

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>