需求：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來操作。
至於三者的區別，筆直理解不透徹，就不描述了。
以上是純屬個人開發中遇到的問題和理解，如有錯誤，請諒解。