Thursday, 11 September 2014

create placeholder in contenteditable div

HTML

<div class="test" placeholder="Type something..." contenteditable="true"></div>


Jquery

jQuery(function($){
    $(".test").focusout(function(){
        var element = $(this);      
        if (!element.text().replace(" ", "").length) {
            element.empty();
        }
    });
});


CSS

.test {
    width: 500px;
    height: 70px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    padding: 5px;
}

.test[placeholder]:empty:before {
    content: attr(placeholder);
   
}

.test[placeholder]:empty:focus:before {
    content: "";
}

http://jsfiddle.net/RZZ6X/9/