听说你的placeholder想换行？

这是同事遇到的一个问题，在<textarea>标签里面不仅要加上placeholder属性，还要换行。在stackoverflow上有相关的讨论，主要有下面几种做法：

官方说明

The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format. The attribute, if specified, must have a value that contains no U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters.
The placeholder attribute should not be used as a replacement for a label. For a longer hint or other advisory text, place the text next to the control.

翻译过来就是：

placeholder属性是用来帮助用户输入的简短提示（一个字或者一个短语），这个提示应该是简单的数值或者简短的描述。placeholder属性不应该作为`label`的替代者。对于较长或者复杂的提示，将文本置于控件旁边。

解决办法

使用`
`

1	<textarea name="foo" placeholder"hello you Second line Third line"></textarea>

这个不能跨浏览器，在ie、chrome下是可以的，但是在firefox和safari中不行。

css解决办法

::-webkit-input-placeholder::before {
  content: "FIRST\000ASECOND\000ATHIRD";
}

::-moz-placeholder::before {
  content: "FIRST\000ASECOND\000ATHIRD";
}

:-ms-input-placeholder::before {
  content: "FIRST\000ASECOND\000ATHIRD";
}

只适用于webkit内核的浏览器（chrome、safari），对firefox和ie没有效果。

使用jQuery的watermark控件

通过watermark可以全平台兼容。下载控件后，引入到项目，然后在<textarea>中定义jq_watermark的class。

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

<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>

官方说明

解决办法

使用&#10;

css解决办法

使用jQuery的watermark控件

使用`
`