textarea placeholder 换行问题处理

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了textarea placeholder 换行问题处理相关的知识,希望对你有一定的参考价值。

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

以上是关于textarea placeholder 换行问题处理的主要内容,如果未能解决你的问题,请参考以下文章

js实现 textArea 的 placeholder 换行

placeholder中文字添加换行方法

textArea中的placeholder属性不起作用

如何实现 placeholder自动换行

通过jQuery在textarea占位符内换行

webkit表单输入框placeholder的文字能换行么?