Question

I have “contenteditable” div element. I want to set a watermark for it so that when user tries to write something in the div the watermark should go disappear.

I tried some watermark jQuery plugins, all work for input, textarea. What is the way to implement this feature for contenteditable div?

Answer 1

If you by “watermark” mean like a placeholder effect, the concept should be fairly simple:

var mark = 'Watermark',
    edited = false;

$('[contenteditable]').focus(function() {
    if(!edited) {
        $(this).empty();
    }
}).blur(function() {
    if(!$(this).html()) {
        $(this).html(mark);
    }
}).keyup(function() {
    edited = true;
}).text(mark);

Demo: http://jsfiddle.net/jjxvR/1/