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高度自適應 還是因爲這個提示文本的問題，後面的麻煩了，直接找了文本框省事，前面作廢了我的天。。。**