如何将占位符添加到 contenteditable div？

Question

如何将占位符添加到 contenteditable div，就像在输入或文本区域字段中允许的那样？

<textarea placeholder="Enter content here..."></textarea>

Answer 1

Javascript:

<script type="text/javascript">

function checkNoLabel(divId,type) {

    if (type == "off") {
        if (document.getElementById(divId).innerHTML == "" || document.getElementById(divId).innerHTML == "<br>") {
            document.getElementById(divId).style.color = "silver";
            document.getElementById(divId).innerHTML = "Enter content here...";
        }
    }
    if (type == "on") {
        if (document.getElementById(divId).innerHTML == "Enter content here...") {
            document.getElementById(divId).innerHTML = "";
            document.getElementById(divId).style.color = "black";
        }
    }
}

</script>

HTML:

<div contenteditable="true" id="theDivId" style="color:silver" onFocus="checkNoContent(this.id,'on')" onBlur="checkNoContent(this.id,'off')">Enter content here...</div>

如果该字段为空，这将使占位符模糊（在 click/tab 之外），并将删除占位符的焦点 (click/tab)。

如何将占位符添加到 contenteditable div？

How can I add a placeholder to a contenteditable div?

placeholder