<div class="control"> <input type="email" id="email" class="email-address" onblur="getValEmail()" /> <label for="email">Email</label> </div> <div class="control box"> <textarea id="message" onblur="getValMsg()"></textarea> <label for="message">message</label> </div> function getValEmail() { const valEmail = document.getElementById("email"); valEmail.addEventListener("blur", function () { if (valEmail.value) valEmail.parentElement.classList.add("filled"); else valEmail.parentElement.classList.remove("filled"); }); } function getValMsg() { const valMsg = document.getElementById("message"); valMsg.addEventListener("blur", function () { if (valMsg.value) valMsg.parentElement.classList.add("filled"); else valMsg.parentElement.classList.remove("filled"); }); } .filled label, input:focus + label, textarea:focus + label { top: 0; font-size: 1.2rem; }

Estos son los códigos HTML, Javascript y CSS en orden. Lo que estoy tratando de lograr aquí es que una vez que el usuario escribe la dirección de correo electrónico/mensaje, las etiquetas que están dentro de la entrada/área de texto aumentan. Por lo tanto, cuando se llenan las entradas/áreas de texto, las etiquetas deberían desaparecer en la parte superior. Hace su trabajo pero no responde. La clase "llena" se agrega después de un par de clics más, lo que significa que las etiquetas solo suben a la parte superior después de hacer clic en el cuadro nuevamente.

El resultado se parece a esto.

Esto solo se logra después de unos pocos clics más en el cuadro.