Manual input Placeholder

by Sam88

HTML

<br>
    <br>
        <br>

<div class="container">
    <div class="placeholder">placeholder</div>
    <input class="input" type="text" value="asdsd" />
</div>
<br>
<div class="container">
    <div class="placeholder">placeholder</div>
    <input class="input" type="text" value="" />
</div>

CSS

input.input {
    text-align: right;
    width:100%;
}
.placeholder {
    position: absolute;
    right:0;
}
.container {
    position: relative;
}

JavaScript

//Manual input Placeholder

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

function initPlaceholder(container) {
    if (container.children('input').val() !== '') {
        container.children('.placeholder').hide();
    }
    $('.placeholder').on('click', function (event) {
        $(event.target).siblings('input').focus();
    });
    $('.input').on('focus', function (event) {
        if ($(event.target).val() === '') {
            $(event.target).siblings('.placeholder').hide();
        }
    });
    $('.input').on('blur', function (event) {
        if ($(event.target).val() === '') {
            $(event.target).siblings('.placeholder').show();
        }
    });
}