contenteditable div的占位符 [英] Placeholder for contenteditable div

问题描述

我有以下内容： FIDDLE

占位符工作正常， dandy，直到您键入内容， ctrl + A 和 delete 。如果您这样做，占位符就会消失，不会再显示。

出现了什么问题？

$ p> < div class =testplaceholder =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; 
} 
  

---

谢谢。

解决方案

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

CSS：

  [placeholder]：empty：before {
 content：attr ）; 
 color：＃555; 
} 
 
 [placeholder]：empty：focus：before {
 content：; 
} 
  

Javascript：

  jQuery（function（$）{
 $（[contenteditable]）。focusout（function（）{
 var element = $（this）; 
 if（！element.text（）。trim（）。length）{
 element.empty（）; 
} 
}）; 
} 
  

更新了小提琴

I have the following: FIDDLE

The placeholder works fine and dandy until you type something, ctrl + A, and delete. If you do that, the placeholder disappears and never shows up again.

What's wrong? How can I have a placeholder for a contenteditable 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; 
}

---

Thanks.

解决方案

While searching for the same problem i worked out a simple mixed css-javascript solution i'd like to share:

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

Updated fiddle

这篇关于contenteditable div的占位符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！