TextArea里Placeholder换行问题

　　页面上使用TextArea控件时，会时不时的想给个提示，比如按照一定方式操作之类的。正常情况下，会使用Placeholder，但这样的提示是不会换行的，无论是用\r\n，还是用<br/>，都不起作用。

　　前段时间碰到这个问题，一直没有解决，所有页面上的Placeholder都是一行到底，丑死了。

　　无意中，一个朋友提供了一个方法，完美的解决了问题，贴出来和大家分享一下：

　　Html：

<textarea id="text1" placeholder="Line 1" rows="5"></textarea>

<textarea id="text2" placeholder="."  rows="5"></textarea>

　　CSS：

#text1::-webkit-input-placeholder::after {
    display:block;
    content:"Line 2\A Line 3";
}

#text2::-webkit-input-placeholder::before {
    color:#666;
    content:"Line 1\A Line 2\A Line 3\A";
}

　　如此，最终效果如下：

　　编辑前：

TextArea里Placeholder换行问题

编辑后：

TextArea里Placeholder换行问题

　　完美解决！

===================华丽丽的分割线=====================

　　悲剧出现了，火狐浏览器不兼容，我去了，有种蛋蛋的忧伤~

　　原因是因为火狐和其他浏览器不兼容，有自己专门的方法：

textarea::-moz-placeholder:after{
  content:"line@ \A line#";/*  \A 表示换行  */
  color:red;
};

　　实际测试了一下，还是不能用。

　　在各种无结果的情况下，Google上进行求助，在*找到相应的解答，使用jQuery的watermark控件。

　　具体代码如下：

<label for="comments">Comments:</label><br />
<textarea id="comments" placeholder="Tell Us<br/>What do you think...<br/>We are here" class="jq_watermark" rows="3" cols="80"></textarea>

　　展示效果如下：

　　 TextArea里Placeholder换行问题

　　当然，前提是不能忘记添加watermark的jQuery链接，如下：

<script type="text/javascript" src="jquery.watermark.js"></script>

　　具体下载地址：https://github.com/marioestrada/jQuery-Watermark

秒客网

TextArea里Placeholder换行问题

相关文章