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/

Answer 3

我这样解决了：

someList[i] = this.items[i];

contenteditable div元素的水印

3 个答案: