textarea placeholder 換行問題處理

APP中嵌入webview時  碰到的文字對齊需求  ----主測 chrome   firefox   safari

第一感覺就是直接在placeholder屬性中寫入 \n  <br> 之類的 ，然而並沒什麼用

網上查了下   各種說辭不一， 歸納總結如下：

有效方法列表：

· 類似\n的解決方式   如：

[1]  placeholder="Line 1   &#13;&#10;  Line 2"

[2]   placeholder="Line 1

Line2"      ----這個是隨便測試的，因爲會打亂代碼格式   個人並不推薦

---- chrome 瀏覽器中測試有效   safari  firefox 無效

·使用 css  ::before   或  ::after  樣式實現

<textarea id="textline" placeholder="..." rows="5"></textarea>
<style>
#textline::-webkit-input-placeholder::before {
    display:block;
    color:#666;
    content: "line1 \A line2 \A line3 \A";
}
</style>

---- safari  瀏覽器中測試有效   chrome  firefox無效 

同理 使用  -moz-placeholder    before   after  嘗試解決 firefox 瀏覽器兼容問題

搜索參考了網上的一段css樣式     內容如下：

/* all */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }

/* individual: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* individual: mozilla */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

然而實際測試發現並沒有什麼用 -------

不過 到這邊   已經解決了  android  及  iOS  嵌入的webview中  placeholder 提示換行問題

就不過度糾結了

其他蒐集方法列表：

· 使用js   在定義的字符串中   如： var ph = "line \n  another line \n third line";

然後再賦值到placeholder 屬性上 

·結合div   css 實現樣式覆蓋 

實現起來感覺比較麻煩  還是算了吧

如果你也碰到了這個問題   看到這個 ，並且方便的解決了  firefox  的兼容問題，歡迎留言交流 :)