JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<div class="cmp-floatLabel">
   <input class="cmp-floatLabel-input" value="coucou" />
   <label class="cmp-floatLabel-label">Foo</label>
</div>

<div class="cmp-floatLabel">
   <input class="cmp-floatLabel-input" />
   <label class="cmp-floatLabel-label">Foo</label>
</div>

CSS

.is-focused {color: red;}

JavaScript

var config = {
    field: '.cmp-floatLabel-input',
};

function init() {
    if($(config.field).length) {
        $(document).on('keyup focus change', config.field, function (e) {
            fieldHasText(this);
            // Parse others inputs to handle Algolia autocompletion
            $(config.field).each(function(i, el) {
                fieldHasText(el);
            });
        });

        setTimeout(function() {
            $(config.field).each(function(i, el) {
                fieldHasText(el);
            })
        }, 500);
    }
}

function fieldHasText(el) {
    var $elAct = $(el);
    var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);

    if ($elAct.prop('placeholder')) {
        $elAct.addClass('highlight')
            .parents('.cmp-floatLabel').find('label').addClass('is-focused');
    }

    if (isChrome && $("input:-webkit-autofill").length) {
        $elAct.addClass('highlight')
            .parents('.cmp-floatLabel').find('label').addClass('is-focused');
    }

    if (!$elAct || $elAct.length === 0 || !$elAct.val()) {
        return;
    }

    if ($elAct.val().length) {
        $elAct.addClass('highlight')
            .parents('.cmp-floatLabel').find('label').addClass('is-focused');
    } else {
        $elAct.removeClass('highlight')
            .parents('.cmp-floatLabel').find('label').removeClass('is-focused');
    }
}

init();