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/