textarea placeholder 换行问题处理

Posted 2020-07-20

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  的兼容问题，欢迎留言交流 :)

本文出自 “微所欲为——微生活” 博客，请务必保留此出处http://vsfor.blog.51cto.com/4165449/1785746