APP中嵌入webview时 碰到的文字对齐需求 ----主测 chrome firefox safari
第一感觉就是直接在placeholder属性中写入 \n <br> 之类的 ,然而并没什么用
网上查了下 各种说辞不一, 归纳总结如下:
有效方法列表:
· 类似\n的解决方式 如:
[1] placeholder="Line 1 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 的兼容问题,欢迎留言交流 :)
时间: 2024-09-30 18:04:27