Javascript contenteditable div的占位符

我有以下资料：

在您键入内容、ctrl+A和delete之前，占位符可以正常工作。如果这样做，占位符将消失，不再显示

怎么了？如何为contenteditable div设置占位符

HTML:

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

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

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

---

---

谢谢。

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

但是，当您在ContentEditable div中点击“enter”时，似乎会创建一个包含换行符的子div

创建一个问题：空伪类，它只针对没有子元素的元素。**

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

来自developer.mozilla.org

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

---

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

正如swifft所说，您可以使用一些超级简单的JS来解决此问题。使用jQuery：

var $input = $(".test");
$input.keyup(function () {
    if ($input.text().length == 0) {
        $input.empty();
    }
});

---

每次击键时，它都会检查是否存在任何输入文本。如果没有，它会重击用户与元素交互可能留下的任何子元素——例如

swift描述的

更新Christian Brink的答案，你可以/应该检查更多事件。您只需执行以下操作即可：

// More descriptive name
var $input = $(".placeholder");
function clearPlaceHolder() {
  if ($input.text().length == 0) {
    $input.empty();
    }
  }

// On each click
$input.keyup(clearPlaceHolder);

// Probably not needed, but just in case
$input.click(clearPlaceHolder);

// Copy/paste/cut events http://stackoverflow.com/q/17796731
$input.bind('input', (clearPlaceHolder));

// Other strange events (javascript modification of value?)
$input.change(clearPlaceHolder);

---

最后，

我有这个功能，我总是用它来防止这种事情

我以这种方式使用我的功能：

var notEmpty = {}

    notEmpty.selector = ".no-empty-plz"
    notEmpty.event = "focusout"
    notEmpty.nonEmpty = "---"


    neverEmpty(notEmpty)

我只是把非空plz添加到我不想为空的元素中

/**
     * Used to prevent a element have a empty content, made to be used 
when we want to edit the content directly with the contenteditable=true 
because when a element is completely empty, it disappears U_U
     * 
     * @param selector
     * @param event
     * @param nonEmpty:
     *        String to be put instead empty
     */
function neverEmpty(params) {

    var element = $(params.selector)



    $(document).on(params.event, params.selector, function() {

        var text = $(this).html()
        text = hardTrim(text)

        if ($.trim(text)  == "") {
            $(this).html(params.nonEmpty)
        }
    });
}

params实际上是一个json，所以可以看到selector=params.selector

hardTrim也是我创建的另一个功能，类似于trim，但包括和

、

等

function hardTrim(text) {

    if (!exists(text)) {
        return ""
    }
    text = text.replace(/^\&nbsp\;|<br?\>*/gi, "").replace(/\&nbsp\;|<br?\>$/gi, "").trim();

    return text
}

功能硬修剪（文本）{
如果（！存在（文本））{
返回“”
}
text=text.replace（/^\\\\*/gi，“”）.replace（/\\\\\$/gi，“”）.trim（）；
返回文本
}

在搜索同一个问题时，我想出了一个简单的混合css JavaScript解决方案，我想与大家分享：

CSS:

JavaScript:

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

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

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

---

感觉就像在重复我自己，但为什么不检查

contenteditable

元素突变呢？试图将所有内容都绑定到正在改变内容的事件上是件痛苦的事。如果需要添加按钮（例如粘贴）或动态更改内容（javascript），该怎么办。我的方法是使用。演示

HTML:

JavaScript:

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

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

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

一些修复：

1）

$element.text（）.trim（）.length

-它解决了

和

2）

数据占位符

attr而不是

占位符

——这是正确的方法

3） 公共选择器<代码>$（“[contenteditable]”）-这是正确的方法

4）

显示：内联块-修复Chrome和Firefox

JavaScript:

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

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

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

HTML:

从

我已经通过HTML和CSS创建了一个实时演示：“内容可编辑div的占位符”。

此外，代码笔：

参考：


.editor{
边框：实心1px灰色；
宽度：300px；
高度：100px；
填充：6px；
溢出：滚动；
}
[内容可编辑][占位符]：空：在{
内容：attr（占位符）；
位置：绝对位置；
颜色：灰色；
背景色：透明；
}





我从以下渠道获得此解决方案：

基本上把这个css代码：

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

并在contenteditable分区中具有占位符属性。
此解决方案适合我。我已将此解决方案从角度转换为纯javaScript

In.html

<div placeholder="Write your message.." id="MyConteditableElement" onclick="clickedOnInput = true;" contenteditable class="form-control edit-box"></div>

在js中

clickedOnInput:boolean = false;
charactorCount:number = 0;
let charCount = document.getElementsByClassName('edit-box')[0];

if(charCount){
this.charactorCount = charCount.innerText.length;
}

if(charactorCount > 0 && clickedOnInput){
document.getElementById("MyConteditableElement").classList.add('holder');
}

if(charactorCount == 0 && !clickedOnInput){
document.getElementById("MyConteditableElement").classList.remove('holder');
}

getContent(innerText){
  this.clickedOnInput = false;
}

你用的是什么浏览器？我不能按ctrl+a键。。也不要删除占位符文本。我在chrome上可以正常工作，你在使用哪个浏览器？在FF上可以正常工作我在使用Firefox，但它不工作（是的，我有最新的更新）：/不知道CSS
attr（）
-谢谢+1很好，但是有更多的情况会发生这种情况（右键单击+剪切）。谢谢Francisco，比我的更全面，而且非常清楚。当我的页面加载时，如何获取占位符？它工作得很好，但是在我输入了一些东西并删除了输入字段中的所有内容之后，它就开始工作了。也许你的元素不是空的？上面的代码只过滤空格，而不是换行符。除非您键入内容，否则占位符应该保留。这会逐渐消失。对于您假定的行为，只需从css中删除
[placeholder]：empty:focus:before
元素。请添加
光标：文本
否则，当显示占位符位置时，光标将是箭头-

：）当div contenteditable为空且我加载页面时，它不会显示任何内容。占位符只在我输入它之后工作，然后我用退格清除div contenteditable。如果我一开始就想要它，我能做什么这个解决方案删除了div中的，如果你需要它怎么办这很漂亮这很酷，适合很多用例，谢谢！这是完美的为什么这不是更高！答案很好，但并不完美。必须有javascript才能清除为contenteditable divs中的新行创建的break标记和div标记。要证明这一点，请在可编辑div中键入一些内容，然后单击enter创建新行。然后按control+A选择所有文本并使用退格键删除。结果如何？？没有占位符了
clickedOnInput:boolean = false;
charactorCount:number = 0;
let charCount = document.getElementsByClassName('edit-box')[0];

if(charCount){
this.charactorCount = charCount.innerText.length;
}

if(charactorCount > 0 && clickedOnInput){
document.getElementById("MyConteditableElement").classList.add('holder');
}

if(charactorCount == 0 && !clickedOnInput){
document.getElementById("MyConteditableElement").classList.remove('holder');
}

getContent(innerText){
  this.clickedOnInput = false;
}