textarea placeholder 換行問題處理

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

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

網上查了下   各類說辭不一, 概括總結以下:android

有效方法列表:web

· 相似\n的解決方式   如:chrome

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

[2]   placeholder="Line 1ide

Line2"      ----這個是隨便測試的,由於會打亂代碼格式   我的並不推薦測試

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


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

<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  的兼容問題,歡迎留言交流 :)

相關文章
相關標籤/搜索