APP中嵌入webview時 碰到的文字對齊需求 ----主測 chrome firefox safaricss
第一感受就是直接在placeholder屬性中寫入 \n <br> 之類的 ,然而並沒什麼用html
網上查了下 各類說辭不一, 概括總結以下:android
有效方法列表:web
· 相似\n的解決方式 如:chrome
[1] placeholder="Line 1 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 的兼容問題,歡迎留言交流 :)