普通 div 模拟 placeholder

这是由于我们项目中使用的 quasar 组件里的 editor（实际是 div 元素）的占位符问题引起的探讨。

首先说明一下，非表单元素如 div 可以通过加一个 contenteditable 为 true 来实现可编辑。然后给该元素添加占位符样式。

最终采用的纯css实现普通div的placeholder效果的方法如下：

html：

<div class="rich-text" contenteditable="true" placeholder="请输入"></div>

css：

    /* 为空时内容显示元素属性值 */
    .rich-text:empty:before {
        content: attr(placeholder);   /* 元素placeholder属性内容 */
        /*content: '这是占位符';*/     /* 也可以直接写具体文案 */
        color: #ccc;
    }
    /*焦点时内容为空*/
    .rich-text:focus:before {
        content: none;
    }