[FloatingLabel] Floating labels for inputs #input #form

example.js

const INPUT_LABELS = new FloatingLabel('input-wrap float-label', 'input');
const SELECT_LABELS = new FloatingLabel('select-wrap float-label', 'select');
const TEXTAREA_LABELS = new FloatingLabel('textarea-wrap float-label', 'textarea');

example.scss

// Floating input labels
.textarea-wrap,
.input-wrap,
.select-wrap {
    position: relative;

    &.hidden {
        display: none;
    }

    &.active {
        label {
            @include fontSize(12px);
        }
    }

    input, 
    select,
    textarea {
        @include hidePlaceholder();
        background: rgba($white, 0);
    }

    label {
        color: $c_text1;
        position: absolute;
        left: 5px;
        top: 14px;
        transition: all .3s ease-in-out;
        z-index: 1;
        user-select: none;
        @include setFontSize(18px, 16px, 16px);

        span {
            color: #A5A5A5;
            font-size: 12px;
        }
    }
}

.input-wrap,
.select-wrap {
    &.active {
        label {
            transform: translate(0, -20px);
        }
    }
}

.textarea-wrap {
    &.active {
        label {
            transform: translate(0, -31px);
        }
    }
}

.input-wrap {
    label {
        cursor: text;
    }
}

FloatingLabel.js

class FloatingLabel {
    constructor(WRAPPER_ELEMENT, INPUT_TYPE) {
        this.WRAPPER_ELEMENT = WRAPPER_ELEMENT;
        this.INPUT_TYPE = INPUT_TYPE;
        this.INPUT_SELECTOR = '.' + this.WRAPPER_ELEMENT.split(' ').join('.');
        this.INPUT_WRAPPERS = document.querySelectorAll(this.INPUT_SELECTOR);
        this.init();
    }

    init() {
        if (this.INPUT_WRAPPERS) {
            for (let i = 0; i < this.INPUT_WRAPPERS.length; i++) {
                const INPUT_WRAP = this.INPUT_WRAPPERS[i];
                const INPUT = INPUT_WRAP.querySelector(this.INPUT_TYPE);

                if(INPUT){
                    if (INPUT.value) {
                        INPUT_WRAP.classList.add('active');
                    }

                    if (INPUT.type === 'select-one' || INPUT.type === 'select-multiple') {
                        INPUT.addEventListener('change', function () {
                            if (this.value) {
                            INPUT_WRAP.classList.add('active');
                            } else {
                                INPUT_WRAP.classList.remove('active');
                            }
                        });
                    } else {
                        INPUT.addEventListener('input', function () {
                            if (this.value) {
                                INPUT_WRAP.classList.add('active');
                            } else {
                                INPUT_WRAP.classList.remove('active');
                            }
                        });
                    }
                }
            }
        }
    }

    reset() {
        for (let i = 0; i < this.INPUT_WRAPPERS.length; i++) {
            const INPUT_WRAP = this.INPUT_WRAPPERS[i];
            INPUT_WRAP.classList.remove('active');
        }
    }
}