Водяной знак для contenteditable элемента div

Question

У меня есть "contenteditable" элемент div. Я хочу установить для него водяной знак, чтобы, когда пользователь пытается что-то написать в div, водяной знак исчезал.

Я попробовал несколько плагинов jQuery с водяными знаками, все работает для ввода, textarea. Как реализовать эту функцию для contenteditable div?

Answer 1

Если вы под «водяным знаком» подразумеваете эффект заполнителя, концепция должна быть довольно простой:

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);

Демо: http://jsfiddle.net/jjxvR/1/

Answer 2

Вот мой ответ на другой вопрос:

Он использует комбинацию jQuery и CSS3. Работает точно так же, как атрибут заполнителя html5! .

• Прячется сразу при вводе первой буквы
• Показывается снова, когда вы удаляете то, что вводите в него

HTML:

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

CSS3:

.placeholder:after {
    content: "Your placeholder"; /* this is where you assign the place holder */
    position: absolute;
    top: 10px;
    color: #a9a9a9;
}

JQuery:

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

ДЕМО: http://jsfiddle.net/Tomer123/D78X7/

Answer 3

Я решил это так:

div[contenteditable]:empty:before {
    content: '-';
}
div[contenteditable]:focus:before {
    color: transparent;
}