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