開篇嘮叨：看見標題，有人可能會問，HTML中已經包含了input和textarea，自己動手實現一個，有必要麼？
其實不然，接觸過富文本編輯的朋友應該知道，富文本編輯器並非使用input或者textarea來實現的。因為他們都不支持在內部插入帶格式的文本或者圖片。拿ueditor舉例，可以看到，文本編輯的區域並不是 textarea ，而是一個 div ，並且這個div設置了一個屬性：contenteditable = true
既然有這種需求，那今天就給大家分享一下如何實現一個帶包含 placeholder的文本輸入框。用到了如下的一些技術點：
- div contenteditable屬性
- css 偽類 :empty
- css 偽元素 ::after
contenteditable = "true",讓你div變得可以編輯
給div設置一個contenteditable屬性，值為true
<code>
// or
/<code>
在加上一點點樣式：
<code>#test {
width: 195px;
height: 100px;
padding: 2px;
overflow: hidden;
border: 1px solid #cccccc;
}/<code>這時我們的文本輸入框已經可以輸入文字了，並且還可以輸入帶格式的文字或圖片，但是，還沒有placeholder的效果
使用 :empty 選擇器，設置元素中內容為空時的樣式
使用 css 的 :empty 選擇器，可以設置元素內容為空時的樣式，例如，當內容為空時，我們讓輸入框的背景為灰色。
<code>#test:empty {
background: #cccccc;
} /<code> 
當元素內容為空時，向 ::after 偽元素中添加 placeholder 的內容
全部的代碼如下：
<code>
/<code>
在沒有輸入內容時，輸入框會有placeholder的內容
在有文字內容時，placeholder 消失
分享到:
閱讀更多 盆盆兒WEB前端 的文章
