div的contenteditable属性实现高度自适应的文本输入框（仿知乎专栏的大标题样式）

在做一个网页，先是用到了编辑器wangEditor3，发现标题这一块如何设置好看，里面提到知乎专栏的编辑菜单和编辑界面是分离的，就去看了，就是这样很好看：https://zhuanlan.zhihu.com/write
而且没有边框，高度自适应，看了代码是textarea，网上找了很多都是div的contenteditable元素来控制的，就跟着使用，网上很多都一样，就发现有个问题，除了第一次加载的时候没有提示语句，之后触发点掉都是有的，就很纳闷。
不就是第一次加载没显示而已吗，我就自写一个好了，思路就是：先给div设置提示内容，并设置灰色装个模样，然后触发文本框的时候就清楚内容并设置为黑色字体的样式，不过，问题就来了，每次点到都会清除，就不行。就去搜jquery有没有一次加载的，刚好有，就是one函数，然后就解决了，网上的有很多:empty:before和:focus:before这些，我就用了前者，我发现后者不用也可以了，因为我自己装个样代替掉了，不过本来后面这个好像就没能解决第一次加载页面的问题，代码：

.textarea {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 10px;
    /* border: 1px solid; */
    padding: 5px;
    outline: none;
}

.textarea:empty:before {
    content: "这里输入标题";
    color: rgb(169, 169, 169);
}

<div class="textarea" contenteditable="true" style="color: rgb(169, 169, 169);">这里输入标题<br />div>

<script type="text/javascript">
	$(".textarea").one('focus', function () {
		$(this).html('')
		$(this).css('color', 'black');
	});
script>

不简单，我的后端课设不应该老是研究这些有的无的，太浪费我时间了！！

我网上翻了好久，不能解决我问题，然后我投机取巧自行修改了一些代码，算不算原创呀？不要打我！！！

---

**更新！！网上有更牛批的方法，直接引用来来源： textaread高度自适应 还是因为这个提示文本的问题，后面的麻烦了，直接找了文本框省事，前面作废了我的天。。。**