Watermark for 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'); 
    } 
}); 

DEMO：http://jsfiddle.net/Tomer123/D78X7/