可信赖的div的占位符

Question

我有以下内容:FIDDLE

占位符工作正常,花花公子,直到你键入一些东西,ctrl+ A,和delete.如果这样做,占位符将消失,并且不会再次显示.

怎么了？我怎样才能拥有一个可满足的div的占位符？

HTML:

<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; 
}

---

谢谢.

Answer 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();
        }
    });
});

更新了小提琴

Answer 2

我创建了一个现场演示：“内容可编辑 div 的占位符”，由 HTML 和 CSS 编写。
另外，Codepen：https
: //codepen.io/fritx/pen/NZpbqW参考：https : //github.com/fritx/vue-at/issues/39#issuecomment-504412421

.editor {
  border: solid 1px gray;
  width: 300px;
  height: 100px;
  padding: 6px;
  overflow: scroll;
}
[contenteditable][placeholder]:empty:before {
  content: attr(placeholder);
  position: absolute;
  color: gray;
  background-color: transparent;
}

<textarea class="editor"
  placeholder="Textarea placeholder..."
></textarea>
<br/>
<br/>
<div class="editor"
  contenteditable
  placeholder="Div placeholder..."
  oninput="if(this.innerHTML.trim()==='<br>')this.innerHTML=''"
></div>

Answer 3

我从：https : //codepen.io/flesler/pen/AEIFc得到了这个解决方案

基本上把这个css代码：

[contenteditable=true]:empty:before{
  content: attr(placeholder);
  pointer-events: none;
  display: block; /* For Firefox */
}

并在您的 contenteditable div 中设置占位符属性。

Answer 4

来自Placeholder in contenteditable - 焦点事件问题

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

Answer 5

感觉就像在重复自己，但为什么不检查contenteditable元素突变呢？试图将所有内容与正在更改内容的事件绑定在一起是一件很痛苦的事情。如果您需要添加按钮（例如粘贴）或动态更改内容（javascript）怎么办？我的方法是使用MutationObservers。演示小提琴

HTML：

<div class="test" id="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; 
}

JavaScript：

var target = document.querySelector('#test');
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
      if (target.textContent == '') {
          target.innerHTML = '';
      }
  });    
});
var config = { attributes: true, childList: true, characterData: true };
observer.observe(target, config);

Answer 6

我明白你的意思了。在您的小提琴中，我输入了几个字符并使用“ctrl-a”和“delete”将其删除，然后占位符重新出现。

但是，似乎当您在 contenteditabele div 中点击“输入”时，它会创建一个包含换行符的子 div，<div><br></div>从而导致 :empty 伪类出现问题，该伪类仅针对没有子元素的元素。**

在 chrome 开发人员工具或您使用的任何工具中查看它。

来自 developer.mozilla.org

:empty 伪类代表任何根本没有子元素的元素。只考虑元素节点和文本（包括空格）。注释或处理指令不会影响元素是否被视为空。

Ctrl-a 将删除文本，但保留子 div。也许可以通过添加一些 javascript 来解决这个问题。

Answer 7

一些修复：

1）$element.text().trim().length-解决了<div><br/></div>和的问题 

2）data-placeholderattr代替placeholder-这是正确的方法

3）通用选择器$("[contenteditable]")-这是正确的方法

4）display: inline-block;-修复了Chrome和Firefox

JavaScript：

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

HTML：

<div data-placeholder="Type something..." contenteditable="true"></div>

CSS：

[contenteditable]:empty:before {
    content: attr(data-placeholder);
    color: grey;
    display: inline-block;
}