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::-moz-placeholder:after{
  content:"line@ \A line#";/*  \A 表示换行  */
  color:red;
};

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

　　在各类无结果的状况下，Google上进行求助，在stackoverflow找到相应的解答，使用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>

　　展现效果以下：

　　

　　固然，前提是不能忘记添加watermark的jQuery连接，以下：

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

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