Saya telah mencoba beberapa pendekatan tetapi tidak ada yang berhasil. Adakah yang tahu trik bagus untuk menyiasati ini?

<textarea placeholder='This is a line \n this should be a new line'></textarea>

<textarea placeholder='This is a line     
should this be a new line?'></textarea> <!-- this works in chrome apparently -->

PEMBARUAN: Tidak berfungsi di chrome. Itu hanya lebar teks.

Lihat: http://jsfiddle.net/pdXRx/

Apa yang bisa Anda lakukan adalah menambahkan teks sebagai value, yang menghormati jeda baris \n.

$('textarea').attr('value', 'This is a line \nthis should be a new line');

Kemudian Anda bisa menghapusnya focusdan menerapkannya kembali (jika kosong) aktif blur. Sesuatu seperti ini

var placeholder = 'This is a line \nthis should be a new line';
$('textarea').attr('value', placeholder);

$('textarea').focus(function(){
    if($(this).val() === placeholder){
        $(this).attr('value', '');
    }
});

$('textarea').blur(function(){
    if($(this).val() ===''){
        $(this).attr('value', placeholder);
    }    
});

Contoh: http://jsfiddle.net/airandfingers/pdXRx/247/

Bukan CSS murni dan tidak bersih tetapi melakukan trik.

Anda bisa menyisipkan entitas html baris baru 
di dalam atribut placeholder:

<textarea name="foo" placeholder="hello you&#10;Second line&#10;Third line"></textarea>

Bekerja pada: Chrome 62, IE10, Firefox 60

Tidak berfungsi: Safari 11

https://jsfiddle.net/lu1s/bxkjLpag/2/

Jangan berpikir Anda diizinkan melakukan itu: http://www.w3.org/TR/html5/forms.html#the-placeholder-attribute

Konten yang relevan (penekanan saya):

Atribut placeholder mewakili petunjuk singkat (kata atau frasa pendek) yang dimaksudkan untuk membantu pengguna dengan entri data ketika kontrol tidak memiliki nilai. Petunjuk dapat berupa nilai sampel atau deskripsi singkat dari format yang diharapkan. Atribut, jika ditentukan, harus memiliki nilai yang tidak mengandung karakter U + 000A LINE FEED (LF) atau U + 000D CARRIAGE RETURN (CR).

UPDATE (Jan 2016): Retas kecil yang bagus mungkin tidak berfungsi di semua browser lagi jadi saya punya solusi baru dengan sedikit javascript di bawah ini.

A Little Hack Bagus

Rasanya tidak enak, tetapi Anda bisa meletakkan baris baru di html. Seperti ini:

<textarea rows="6" id="myAddress" type="text" placeholder="My Awesome House,
        1 Long St
        London
        Postcode
        UK"></textarea>

Perhatikan setiap baris pada baris baru (tidak sedang dibungkus) dan setiap indentasi 'tab' adalah 4 spasi. Memang itu bukan metode yang sangat bagus, tetapi tampaknya berhasil:

http://jsfiddle.net/01taylop/HDfju/

• Kemungkinan tingkat indentasi setiap baris akan bervariasi tergantung pada lebar area teks Anda.
• Penting untuk memiliki resize: none;di css sehingga ukuran textarea tetap (Lihat jsfiddle).

Atau Ketika Anda menginginkan baris baru, tekan return dua kali (Jadi ada baris kosong di antara 'baris baru' Anda. 'Baris kosong' ini dibuat perlu memiliki cukup tab / spasi yang akan menyamakan dengan lebar teks Anda. Tampaknya menjadi masalah jika Anda memiliki terlalu banyak, Anda hanya perlu cukup. Ini sangat kotor dan mungkin tidak sesuai dengan browser. Saya berharap ada cara yang lebih mudah!

Solusi yang Lebih Baik

Lihatlah JSFiddle .

• Solusi ini menempatkan div di belakang textarea.
• Beberapa javascript digunakan untuk mengubah warna latar belakang textarea, menyembunyikan atau mengungkapkan placeholder dengan tepat.
• Input dan placeholder harus memiliki ukuran font yang sama, karenanya kedua mixin.
• The box-sizingdandisplay: block pada textarea penting atau div di belakangnya tidak akan sama ukurannya.
• Pengaturan resize: verticaldan a min-heightpada textarea juga penting - perhatikan bagaimana teks placeholder akan membungkus dan memperluas textarea akan menjaga latar belakang putih. Namun, mengomentariresize properti akan menyebabkan masalah saat memperluas area teks secara horizontal.
• Pastikan ketinggian minimum pada textarea sudah cukup untuk menutupi seluruh placeholder Anda dengan lebar terkecil. **

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');
  }
});

Bagaimana dengan solusi CSS: http://cssdeck.com/labs/07fwgrso

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

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

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

Salaamun Alekum




Bekerja Untuk Google Chrome

<textarea placeholder="Enter Choice#1 &#10;Enter Choice#2 &#10;Enter Choice#3"></textarea>

Saya Menguji Ini Pada Windows 10.0 (Build 10240) Dan Google Chrome Versi 47.0.2526.80 m

08:43:08 AST 6 Rabi Al-Awwal, 1437 Kamis, 17 Desember 2015

Terima kasih

Tambahkan saja & # 10 untuk garis putus-putus, tidak perlu menulis CSS atau javascript apa pun.

textarea{
    width:300px;
    height:100px;

}

<textarea placeholder='This is a line this &#10should be a new line'></textarea>

<textarea placeholder=' This is a line 

should this be a new line?'></textarea>

Jawaban lama:

Tidak, Anda tidak bisa melakukan itu di atribut placeholder. Anda bahkan tidak dapat menyalin html baris baru seperti 
di placeholder.

Jawaban baru:

Browser modern memberi Anda beberapa cara untuk melakukan ini. Lihat JSFiddle ini:

http://jsfiddle.net/pdXRx/5/

Penggunaan 
di tempat \nini akan mengubah garis.

Coba ini:

<textarea
placeholder="Line1&#x0a;&#x09;&#x09;&#x09;Line2"
cols="10"
rows="5"
style="resize:none">
</textarea>

http://jsfiddle.net/vr79B/

Anda tidak dapat melakukannya dengan HTML murni, tetapi plugin jQuery ini memungkinkan Anda: https://github.com/bradjasper/jQuery-Placeholder-Newlines

Versi yang sedikit lebih baik dari jawaban Jason Gennaro (lihat komentar kode):

var placeholder = 'This is a line \nthis should be a new line';
$('textarea').attr('value', placeholder);
$('textarea').focus(function(){
    if($(this).val() == placeholder){
        // reset the value only if it equals the initial one    
        $(this).attr('value', '');
    }
});
$('textarea').blur(function(){
    if($(this).val() == ''){
        $(this).attr('value', placeholder);
    }    
});
// remove the focus, if it is on by default
$('textarea').blur();

Saya menyukai karya Jason Gennaro dan Denis Golomazov, tetapi saya menginginkan sesuatu yang akan lebih bermanfaat secara global. Saya telah memodifikasi konsep tersebut sehingga dapat ditambahkan ke halaman mana pun tanpa dampak.

http://jsfiddle.net/pdXRx/297/

<h1>Demo: 5 different textarea placeholder behaviors from a single JS</h1>

<h2>Modified behaviors</h2>

<!-- To get simulated placeholder with New Lines behavior,
     add the placeholdernl attribute -->

<textarea placeholdernl>    (click me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134</textarea>

<textarea placeholder='Address' placeholdernl>    (click me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134</textarea>

<h2>Standard behaviors</h2>

<textarea placeholder='Address'>    (delete me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134</textarea>

<textarea>    (delete me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134</textarea>

<textarea placeholder='Address'></textarea>

Javascript sangat sederhana

<script>
(function($){
var handleFocus = function(){
    var $this = $(this);
    if($this.val() === $this.attr('placeholdernl')){
        $this.attr('value', '');
        $this.css('color', '');
    }
};

var handleBlur = function(){
    var $this = $(this);
    if($this.val() == ''){
        $this.attr('value', $this.attr('placeholdernl'))
        $this.css('color', 'gray');
    }    
};

$('textarea[placeholdernl]').each(function(){
    var $this = $(this),
        value = $this.attr('value'),
        placeholder = $this.attr('placeholder');
    $this.attr('placeholdernl', value ? value : placeholder);
    $this.attr('value', '');
    $this.focus(handleFocus).blur(handleBlur).trigger('blur');
});
})(jQuery);
</script>

HTML

<textarea data-placeholder="1111\n2222"></textarea>

JS

$('textarea[data-placeholder]').each(function(){
    var $this = $(this),
        placeholder = $this.data('placeholder'),
        placeholderSplit = placeholder.split('\\n');
    placeholder = placeholderSplit.join('\n');
    $this.focus(function(){
        var $this = $(this);
        if($this.val() === placeholder){
            $this.val('');
            // $this.removeClass('placeholder');
        }
    }).blur(function(){
        var $this = $(this);
        if($this.val() == '') {
            $this.val(placeholder);
            // $this.addClass('placeholder');
        }
    }).trigger('blur');
});

Textarea menghormati atribut spasi putih untuk placeholder. https://www.w3schools.com/cssref/pr_text_white-space.asp

Pengaturan untuk pre-line memecahkan masalah bagi saya.

textarea {
  white-space: pre-line;
}

<textarea placeholder='This is a line     
should this be a new line'></textarea>

Saya memodifikasi biola @ Richard Bronosky seperti ini .

Lebih baik pendekatan untuk menggunakan data-*atribut daripada atribut khusus. Aku diganti <textarea placeholdernl>untuk <textarea data-placeholder>dan beberapa gaya lain juga.

Diedit
Berikut adalah jawaban asli Richard yang berisi cuplikan kode lengkap.

sangat sederhana

  var position = your break position;
    var breakLine = "
";//in html 
    var output = [value.slice(0, position), breakLine, value.slice(position)].join('');
    return output;

nilai mewakili string asli

Lihatlah solusi ini dengan placeholder ubahsuaian.

• Anda mendapatkan multiline placeholder yang berfungsi di semua browser (termasuk Firefox)
• Dimungkinkan untuk menyesuaikan placeholder seperti yang Anda inginkan

Demo tentang biola .

$(document).on('input', '#textArea', function () {
	
        if ($('#textArea').val()) {
            $('#placeholderDiv').hide();
        } else {
            $('#placeholderDiv').show();
        }   
});

#textAreaWrap {
    position: relative;
    background-color: white;
}

#textArea {
    position: relative;
    z-index: 1;
    width: 350px;
    height: 100px;
    min-height: 100px;
    padding: 6px 12px;
    resize: vertical;
    background-color: transparent;
    /* When set background-color: transparent - Firefox  displays
    unpleasant textarea border. Set border style to fix it.*/
    border: 1px solid #a5a5a5;
}

#placeholderDiv {
    position: absolute;
    top: 0;
    padding: 6px 13px;
    color: #a5a5a5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="textAreaWrap">
    
<textarea id="textArea"></textarea>

<!-- Check here. If textarea has content -
     set for this div attribute style="display: none;" -->
<div id="placeholderDiv">Multiline textarea<br>
                         placeholder<br>
                         <br>
                         that works in Firefox</div>
    
</div>

Saya tidak suka menyembunyikan placeholder ketika Anda memfokuskan textarea. Jadi saya membuat fungsi konstruktor Placeholderyang terlihat persis seperti placeholder bawaan dan berfungsi juga di peramban lain selain Google Chrome. Ini sangat nyaman karena Anda dapat menggunakan Placeholderfungsi sesering yang Anda inginkan dan bahkan tidak perlu jQuery.

EDIT:

Sekarang juga menangani kasus khusus, seperti memasukkan placeholder, dengan benar.

var textarea = document.getElementById("textarea");
new Placeholder(textarea, "Line 1\nLine 2\nLine 3");

function Placeholder(el, placeholder) {
    if (el.value == "" || el.value == placeholder) {
        el.style.color = "gray";
        el.value = placeholder;
        el._plc = true;
        el.className += " unselectable";
    }
    function keyPress(e) {
        window.setTimeout(function() {
            var replaced = reverseStr(el.value).replace(reverseStr(placeholder), "");
            
            if (el.value == "") {
                el.value = placeholder;
                el.style.color = "gray";
                cursorToStart(el);
                el._plc = true;
                el.className += " unselectable";
            } else if (el._plc && el.value.endsWith(placeholder) && replaced !== "") {
                el.value = reverseStr(replaced);
                el.style.color = "black";
                el._plc = false;
                el.readOnly = false;
                el.className = el.className.replace("unselectable", "");
            } else if (el._plc && el.readOnly) {
                var ch = String.fromCharCode(e.charCode);
                if (e.keyCode == 13) ch = "\n";     // ENTER
                else if (e.charCode == 0) return;   // non-character keys
                
                el.value = ch;
                el.style.color = "black";
                el._plc = false;
                el.readOnly = false;
                el.className = el.className.replace("unselectable", "");
            }
        }, 10);
    }
    el.addEventListener("keypress", keyPress, false);
    el.addEventListener("paste", keyPress, false);
    el.addEventListener("cut", keyPress, false);
    el.addEventListener("mousedown", function() {
        if (el._plc) el.readOnly = true;
    }, false);
    el.addEventListener("mouseup", function() {
        el.readOnly = false;
        if (el._plc) cursorToStart(el);
    }, false);
  
    function cursorToStart(input) {
        if (input.createTextRange) {
            var part = input.createTextRange();
            part.move("character", 0);
            part.select();
        } else if (input.setSelectionRange){
            input.setSelectionRange(0, 0);
        } input.focus();
    }
    function reverseStr(str) {
        if (!str) return "";
        return str.split("").reverse().join("");
    }
}

textarea {
    border: 1px solid gray;
    padding: 3px 6px;
    font-family: Arial;
    font-size: 13px;
    transition: .2s;
}
textarea:hover, textarea:focus {
    border-color: #2277cc;
}
textarea:focus {
    box-shadow: inset 0 0 5px #85B7E9;
}
*.unselectable {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
}

<textarea id="textarea"></textarea>

Masalah ini dapat diatasi dengan menggunakan pemilih placeholder yang ditunjukkan dan latar belakang yang diberlakukan super, jika implementasi Anda memungkinkan:

textarea:not(:placeholder-shown) {
  background: #fff;
}

div {
  top: 0;
  left: 14px;
  color: rgba(0,0,0,0.4);
  z-index: -1;
  position: absolute;
  line-height: 1.2;
  white-space: pre-wrap;
}

https://codepen.io/franciscoaquino/pen/YzyBPYK

Dukungan pemilih:

https://caniuse.com/#feat=css-placeholder-shown