JavaScript: Placeholder Label Fallback

JavaScript: Placeholder Label Fallback.js

// JS

if (!Modernizr.input.placeholder) {
    
    $('.placeholder-fallback').addClass('fallback');

    $('.has-placeholder').keyup(function() {
        var fieldValue = $(this).val();
        var fieldname = $(this).attr('name');
        if (fieldValue === '') {
            $('label[for=' + fieldname + ']').show();
        } else {
            $('label[for=' + fieldname + ']').hide();
        }
    });

    $('.has-placeholder').change(function() {
        var fieldValue = $(this).val();
        var fieldname = $(this).attr('name');
        if (fieldValue === '') {
            $('label[for=' + fieldname + ']').show();
        } else {
            $('label[for=' + fieldname + ']').hide();
        }
    });
}

// HTML

<label class="placeholder-fallback" for="first_name">First Name</label>
<input class="has-placeholder" id="first_name" name="first_name" type="text" placeholder="First Name" required>

// CSS

.placeholder-fallback {
    top: 15px;
    left: 25px;
    position: absolute;
    display: none;
}

.placeholder-fallback.fallback {
    display: block;
}