如果可编辑div没有文本而不是设置占位符

Question

我尝试使用占位符制作可编辑的div.但我想在此div中没有​​文本而不是自动占位符集.

实际上我contentEditable='true';在div上使用这个元素.我使用jQuery处理这个函数的占位符.`

     $('div').on('activate',
        function() {
       $(this).empty();
       var range, sel;
     if ( (sel = document.selection) && document.body.createTextRange){
    range = document.body.createTextRange();
    range.moveToElementText(this);
    range.select();} });    


    $('div').focus(function() {
    if (this.hasChildNodes() && document.createRange && window.getSelection) {

   $(this).empty();
    var range, sel;
    range = document.createRange();
    range.selectNodeContents(this);
    sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
}});

`

Answer 1

你coud尝试使用CSS与伪 :empty,并:before和数据属性. http://codepen.io/gcyrillus/pen/hzLIE

div:empty:before {
  content:attr(data-placeholder);
  color:gray
}

<div  contenteditable="true" data-placeholder="You can insert & edit content here."></div>

它应该在几个浏览器中工作