contenteditable div 元素的水印答案

【问题标题】：Watermark for contenteditable div elementcontenteditable div 元素的水印
【发布时间】：2012-03-03 21:43:02
【问题描述】：

我有“contenteditable”的 div 元素。我想为它设置一个水印，这样当用户尝试在 div 中写一些东西时，水印就会消失。

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

【问题讨论】：

标签： javascript jquery html contenteditable

【解决方案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/

【讨论】：

太酷了。但是有一个问题，如果一个用户写了与mark 相同的文本，那么它就是一个问题。
您可以添加 keyup 标志，请参阅我的编辑。这只是概念性的，您可能需要进行进一步的测试以使其对您的应用程序安全。
我的 DIV 元素是自动对焦的。更改了您的代码位$('[contenteditable]').bind("focus keydown",function() { ...//same as your code
很高兴看到您在这里使用.empty() 而不是.html("")
如何使水印颜色变浅？此外，如果您输入文本，退格/删除文本，然后模糊，水印不会重新出现。

【解决方案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/

【讨论】：

【解决方案3】：

我是这样解决的：

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

【讨论】：