Manual input Placeholder

by Sam88

HTML

<input class="placeholder" type="text" value="" data-placeholder="Lastname" />
<br/>
<input class="placeholder" type="text" value="" data-placeholder="Firstname" />
<br/>
<input class="placeholder" type="text" value="" data-placeholder="[email protected]" />
<br/>
<input class="placeholder" type="text" value="" data-placeholder="City" />

CSS

input.placeholder {
    text-align: right;
}

JavaScript

//Placeholder JS

jQuery(document).ready(function () {
    var inputList = jQuery('input.placeholder');
    for (var i = 0; i < inputList.length; i++) {
        initPlaceholder(jQuery(inputList[i]));
    }
});

function initPlaceholder(input) {
    if (input.val() === '') {
        input.val(input.attr('data-placeholder'));
    }
    input.on('focus', function () {
        if (input.val() == input.attr('data-placeholder')) {
            input.val('');
        }
    });
    input.on('blur', function () {
        if (input.val() === '') {
            input.val(input.attr('data-placeholder'));
        }
    });
}