更新（2016年1月）：素敵な小さなハックがすべてのブラウザーで機能しない可能性があるため、以下の小さなJavaScriptを使用した新しいソリューションがあります。
素敵な小さなハック
いい感じではありませんが、htmlに新しい行を入れるだけです。このような：
<textarea rows="6" id="myAddress" type="text" placeholder="My Awesome House,
1 Long St
London
Postcode
UK"></textarea>
各行が新しい行にあり（折り返されていない）、「タブ」のインデントは4スペースであることに注意してください。確かにそれはあまり良い方法ではありませんが、うまくいくようです：
http://jsfiddle.net/01taylop/HDfju/
- 各行のインデントレベルは、テキスト領域の幅によって異なる可能性があります。
resize: none;textareaのサイズが固定されるように、cssに含めることが重要です（jsfiddleを参照）。
または
、新しい行が必要な場合は、改行を2回押します（「新しい行」の間に空の行があります。作成されたこの「空の行」には、テキスト領域の幅と同じになる十分なタブ/スペースが必要です。数が多すぎても問題はないようですが、これで十分です。これは非常に汚いもので、おそらくブラウザに準拠していません。もっと簡単な方法があったらいいのにと思います！
より良いソリューション
JSFiddleを調べてください。
- このソリューションは、divをtextareaの後ろに配置します。
- 一部のjavascriptは、テキスト領域の背景色を変更して、プレースホルダーを適切に非表示または表示するために使用されます。
- 入力とプレースホルダーのフォントサイズは同じである必要があるため、2つのミックスインが必要です。
box-sizingとdisplay: blocktextareaプロパティは重要です。そうでない場合、背後のdivは同じサイズではありません。- textareaの設定
resize: verticalとa min-heightも重要です。プレースホルダーテキストがどのように折り返され、textareaを拡張しても白い背景が維持されることに注意してください。ただし、コメントアウトresizeプロパティをと、テキスト領域を水平方向に拡張するときに問題が発生します。
- textareaのmin-heightが、最小幅でプレースホルダー全体をカバーするのに十分であることを確認してください。**
HTML：
<form>
<input type='text' placeholder='First Name' />
<input type='text' placeholder='Last Name' />
<div class='textarea-placeholder'>
<textarea></textarea>
<div>
First Line
<br /> Second Line
<br /> Third Line
</div>
</div>
</form>
SCSS：
$input-padding: 4px;
@mixin input-font() {
font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
font-size: 12px;
font-weight: 300;
line-height: 16px;
}
@mixin placeholder-style() {
color: #999;
@include input-font();
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
form {
width: 250px;
}
input,textarea {
display: block;
width: 100%;
padding: $input-padding;
border: 1px solid #ccc;
}
input {
margin-bottom: 10px;
background-color: #fff;
@include input-font();
}
textarea {
min-height: 80px;
resize: vertical;
background-color: transparent;
&.data-edits {
background-color: #fff;
}
}
.textarea-placeholder {
position: relative;
> div {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: $input-padding;
background-color: #fff;
@include placeholder-style();
}
}
::-webkit-input-placeholder {
@include placeholder-style();
}
:-moz-placeholder {
@include placeholder-style();
}
::-moz-placeholder {
@include placeholder-style();
}
:-ms-input-placeholder {
@include placeholder-style();
}
JavaScript：
$("textarea").on('change keyup paste', function() {
var length = $(this).val().length;
if (length > 0) {
$(this).addClass('data-edits');
} else {
$(this).removeClass('data-edits');
}
});
<?="\n"?>、新しい行として