div 设置contenteditable 之后的placeholder效果

假设有个id为“editBox”的div，需求是

1、其可编辑    --->对其设置contenteditable =“true”，即可；

2、拥有类似input的“placeholder”效果    --->解决方案如下：

// HTML：
<div class="container">
    <div class="bgholder">请输入内容</div><!- 做背景用 -->
    <div contenteditable="true" class="noContent" id="editBox"></div>
</div>

// CSS：
div{
    width: 400px;
    height: 400px;
    margin: auto;
}
.container{
    position: relative;
}
.bgholder{
    position: absolute;
    padding-left: 10px;
}
#editBox{
    position: relative;
    background-color: rgb(248, 248, 248);
    padding-left: 10px;
}
.noContent{
    background-color: rgba(248, 248, 248, 0.5) !important;
}

// JS:

    var editBox = document.getElementById('editBox');
    editBox.oninput = function () {
        if(this.innerText.length == 0){
            this.className = "noContent";// 此处控制bgholder的显示隐藏或者内容都可以，不一定需要通过控制类名来控制颜色
        }else{
            this.className = "";
        }
    }