需求：web頁面需要一個文本輸入框。1、該文本輸入框默認狀態下有個仿‘placeholder’的默認文本提示信息，2、文本框輸入狀態下其高度會隨文本內容自動撐開。

方案選擇：1、使用<textarea>標簽。但是標簽高度不會隨文本高度自動撐開，而是出現滾動條。使用JS動態計算文本內容高度賦予<textarea>標簽高度。

　　　　　2、使用<div>或者<p>、<span>等非表單標簽，通過賦予其contentEditable=‘true‘屬性，是其獲得內容可以編輯的功能，從而使標簽高度隨著文本內容高度自動撐開。

遇到的問題：方案一遇到的問題此文不做討論。

使用contentEditable屬性雖然滿足的需求2，但是無法滿足需求1。

1 <div contentEditable=‘true‘></div>

解決方案：使用:before偽元素達到仿‘placeholder’的效果。

使用css3的attr()函數。獲取div標簽中的‘placeholder’或者其他自定義屬性‘data-*‘的值，賦予:before偽元素展示即可。

當文本輸入的時候，使用JS替換div標簽的classname，使其沒有:before偽元素，當輸入框沒有值得時候再替換classname，重新賦予:before偽元素，即可達到input等表單標簽的placeholder效果。

 1 <div class=‘d‘ contentEditable=‘true‘ placeholder=‘請輸入您的建議‘></div> 
 2 .d:before {
 3          //有:before
 4          content: attr(placeholder);
 5          display: block;
 6          color: #adadad;
 7 }
 8  
 9 <div class=‘a‘ contentEditable=‘true‘ placeholder=‘請輸入您的建議‘></div>
10
 
 .a{
11       // 無:before  
12 }

遇到的問題：仿‘placeholder’在safari的表現不同。當用輸入框內輸入值後，在刪除輸入框，safari無法用DOM.innerText或者DOM.innerHTML的length來做判斷，因為刪除完後，在輸入框中有一個空換行符。具體原理本人不是很懂。

解決方案：在length的判斷基礎上再額外加判斷條件

1 var val=DOM.innerHTML;
2 
3 val.length > 0 && val != ‘<br>‘ && val != ‘<br/>‘;
4 
5 
6 var val2=DOM.innerText;
7 
8 val2.length > 0 && val2 != ‘<br>‘ && val2 != ‘<br/>‘

如果你不需要用到上面的方法可以使用DOM.textContent。safari和chrome表現相同，具體場景使用具體的API來操作。

至於三者的區別，筆直理解不透徹，就不描述了。

以上是純屬個人開發中遇到的問題和理解，如有錯誤，請諒解。

<div>標簽仿<textarea>。contentEditable=‘true’，賦予非表單標簽內容可以編輯