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