JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<ul>
    <li>
        <label>Your name</label>
        <input type="text"/>
    </li>
    <li>
        <label>Your name</label>
        <input type="text" value=" "/>
    </li>
    <li>
        <label>Your name</label>
        <input type="text"/>
    </li>
    <li>
        <label>Your name</label>
        <input type="text" value=" "/>
    </li>
    <li>
        <label>Your name</label>
        <input type="text"/>
    </li>
    <li>
        <label>Your name</label>
        <textarea class="labelhidden" id="lbinput_cont"></textarea>
    </li>
</ul>

CSS

label
{
   position: absolute;
}

JavaScript

$(function(){
    $('label').filter(function(){
        return $.trim($(this).siblings('input[type=text]').val()).length > 0;
    }).hide();
});

$(document).on('click', 'label', function() {
    $(this).next().focus();
});

$(document).on('focus', 'input,textarea', function() {
    var label = (this.value === "") ? $(this).prev('label').show().fadeTo(100, 0.25) : $(this).prev('label').fadeTo(100, 0).hide();
});

$(document).on('blur', 'input,textarea', function() {
    var label = (this.value === "") ? $(this).prev('label').show().fadeTo(100, 1) : $(this).prev('label').fadeTo(100, 0).hide();
});

$(document).on('keypress', 'input, textarea', function() {
    var label = $(this).prev('label').hide();
});