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

Question

如何将占位符添加到输入或textarea字段中允许的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>

如果该字段为空，这将使占位符处于模糊状态（在点击/标签上）并将删除焦点上的占位符（单击/选项卡）。