内容可编辑 div 的占位符

javascript jquery html css

2022-08-30 05:42:41

我有以下几点：小提琴

占位符工作正常且花哨，直到您键入某些内容 + 和。如果这样做，占位符将消失，并且永远不会再次显示。ctrlAdelete

怎么了？如何为内容可编辑的 div 设置占位符？

网页：

<div class="test" placeholder="Type something..." contenteditable="true"></div>

CSS：

谢谢。

.test {
    width: 500px;
    height: 70px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    padding: 5px;
}

.test[placeholder]:empty:before {
    content: attr(placeholder);
    color: #555; 
}

答案 1

在寻找同样的问题时，我制定了一个简单的混合css-JavaScript解决方案，我想分享：

CSS：

[placeholder]:empty::before {
    content: attr(placeholder);
    color: #555; 
}

[placeholder]:empty:focus::before {
    content: "";
}

JavaScript：

jQuery(function($){
    $("[contenteditable]").focusout(function(){
        var element = $(this);        
        if (!element.text().trim().length) {
            element.empty();
        }
    });
});

更新的小提琴

答案 2

来自内容编辑中的占位符 - 焦点事件问题

[contenteditable=true]:empty:not(:focus):before{
  content:attr(data-ph);
  color:grey;
  font-style:italic;
}