jQuery Placeholder

by surfine

HTML

<div class="placeholder" contenteditable="true"></div>

CSS

div {
    height: 50px; width: 200px;
    border: 1px solid #ccc;
}
.placeholder:after {
    content: "Placeholder111";
    position: absolute;
    top: 10px;
    color: #a9a9a9;
    font-family: Arial;
}

JavaScript

$('.placeholder').on('input', function(){
    if ($(this).text().length > 0) {
        $(this).removeClass('placeholder');
    } else {
        $(this).addClass('placeholder');
    }
});