textarea placeholder 換行問題處理

APP中嵌入webview時(shí)  碰到的文字對(duì)齊需求  ----主測(cè) chrome   firefox   safari

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

網(wǎng)上查了下   各種說辭不一， 歸納總結(jié)如下：

有效方法列表：

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

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

[2]   placeholder="Line 1

Line2"      ----這個(gè)是隨便測(cè)試的，因?yàn)闀?huì)打亂代碼格式   個(gè)人并不推薦

---- chrome 瀏覽器中測(cè)試有效   safari  firefox 無效

·使用 css  ::before   或  ::after  樣式實(shí)現(xiàn)

<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  瀏覽器中測(cè)試有效   chrome  firefox無效 

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

搜索參考了網(wǎng)上的一段css樣式     內(nèi)容如下：

/* 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; }

然而實(shí)際測(cè)試發(fā)現(xiàn)并沒有什么用 -------

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

就不過度糾結(jié)了

其他搜集方法列表：

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

然后再賦值到placeholder 屬性上 

·結(jié)合div   css 實(shí)現(xiàn)樣式覆蓋 

實(shí)現(xiàn)起來感覺比較麻煩  還是算了吧

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