Javascript contenteditable div元素的水印

我有“contenteditable”div元素。我想为它设置一个水印，这样当用户试图在div中写入内容时，水印应该消失

我尝试了一些水印jQuery插件，所有这些插件都适用于输入，textarea。contenteditable div实现此功能的方法是什么？

如果您所说的“水印”指的是占位符效果，那么这个概念应该相当简单：

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

---

演示：

这是我对另一个问题的回答：

它使用jQuery和CSS3的组合的工作原理与html5占位符属性完全相同

• 输入第一个字母时，会立即隐藏自己
• 当您删除输入的内容时，它会再次显示

HTML:

jQuery：

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

演示：

我是这样解决的：

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

---

太酷了。但是有一个问题，如果一个用户编写的文本与

标记的文本相同，那么这就是一个问题。您可以添加一个keyup标志，请参阅我的编辑。这只是概念性的，您可能需要做进一步的测试，以确保应用程序的安全。我的DIV元素是自动聚焦的。更改了您的代码位
$（'[contenteditable]'）。绑定（“focus keydown”，function（）{…//与您的代码相同
很高兴看到您在此处使用了
.empty（）
，而不是
.html（“”）
如何使水印颜色变浅？此外，如果输入文本，退格/删除文本，然后模糊，水印不会重新出现。
$('.placeholder').on('input', function(){
    if ($(this).text().length > 0) {
        $(this).removeClass('placeholder');
    } else {
        $(this).addClass('placeholder');
    }
});

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