Bisakah Anda memiliki teks multiline HTML5 placeholder di <textarea>?

Saya memiliki teks hantu di bidang teks yang hilang saat Anda fokus pada mereka menggunakan atribut placeholder HTML5:

<input type="text" name="email" placeholder="Enter email"/>

Saya ingin menggunakan mekanisme yang sama untuk memiliki teks tempat penampung multiline di sebuah textarea, mungkin seperti ini:

<textarea name="story" placeholder="Enter story\n next line\n more"></textarea>

Tapi itu \nmuncul dalam teks dan tidak menyebabkan baris baru ... Apakah ada cara untuk memiliki placeholder multiline?

UPDATE : Satu-satunya cara saya membuat ini berfungsi adalah menggunakan plugin jQuery Watermark , yang menerima HTML dalam teks placeholder:

$('.textarea_class').watermark('Enter story<br/> * newline', {fallback: false});

Untuk <textarea>s spec khusus menguraikan bahwa tombol kembali + jeda baris dalam atribut placeholder HARUS diterjemahkan sebagai linebreaks oleh browser.

Agen pengguna harus menyajikan petunjuk ini kepada pengguna ketika nilai elemen adalah string kosong dan kontrol tidak fokus (misalnya dengan menampilkannya di dalam kontrol kosong yang tidak fokus). Semua U + 000D CARRIAGE RETURN U + 000A LINE FEED pasangan karakter (CRLF) dalam petunjuk, serta semua U + 000D CARRIAGE RETURN (CR) dan karakter U + 000A LINE FEED (LF) dalam petunjuk, harus diperlakukan sebagai baris terputus ketika memberikan petunjuk.

Juga tercermin pada MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder

FWIW, ketika saya mencoba Chrome 63.0.3239.132, itu memang berfungsi seperti yang seharusnya.

Pada sebagian besar (lihat detail di bawah) browser, mengedit placeholder di javascript memungkinkan placeholder multiline. Seperti yang telah dikatakan, itu tidak sesuai dengan spesifikasi dan Anda seharusnya tidak mengharapkannya bekerja di masa depan (edit: itu berfungsi).

Contoh ini menggantikan semua placeholder textarea multiline.

var textAreas = document.getElementsByTagName('textarea');

Array.prototype.forEach.call(textAreas, function(elem) {
    elem.placeholder = elem.placeholder.replace(/\\n/g, '\n');
});

<textarea class="textAreaMultiline" 
          placeholder="Hello, \nThis is multiline example \n\nHave Fun"
          rows="5" cols="35"></textarea>

_{Cuplikan JsFiddle .}

Berdasarkan komentar tampaknya beberapa browser menerima hack ini dan yang lainnya tidak.
Ini adalah hasil dari tes yang saya jalankan (dengan browsertshots dan browserstack )

• Chrome:> = 35.0.1916.69
• Firefox:> = 35.0 (hasil bervariasi di platform)
• IE:> = 10
• Browser berbasis KHTML: 4.8
• Safari: Tidak (diuji = Safari 8.0.6 Mac OS X 10.8)
• Opera: Tidak (diuji <= 15.0.1147.72)

Menyatu dengan statistik tesis ini, ini berarti bahwa ia berfungsi pada sekitar 88,7% dari browser yang digunakan saat ini (Oktober 2015) .

Pembaruan : Hari ini, ia berfungsi pada setidaknya 94,4% dari browser yang digunakan saat ini (Juli 2018) .

Saya menemukan bahwa jika Anda menggunakan banyak ruang, browser akan membungkusnya dengan benar. Jangan khawatir tentang menggunakan jumlah spasi yang pasti, cukup lempar banyak di sana, dan browser harus membungkus dengan benar ke karakter non-spasi pertama pada baris berikutnya.

<textarea name="address" placeholder="1313 Mockingbird Ln         Saginaw, MI 45100"></textarea>

Sebenarnya ada peretasan yang memungkinkan untuk menambahkan tempat penampung multiline di peramban WebKit, Chrome digunakan untuk bekerja tetapi dalam versi yang lebih baru mereka menghapusnya:

Pertama tambahkan baris pertama placeholder Anda ke html5 seperti biasa

<textarea id="text1" placeholder="Line 1" rows="10"></textarea>

kemudian tambahkan sisa baris dengan css:

#text1::-webkit-input-placeholder::after {
    display:block;
    content:"Line 2\A Line 3";
}

Jika Anda ingin menjaga dialog di satu tempat, Anda dapat mencoba yang berikut ini. Kelemahan dari ini adalah browser lain selain chrome, safari, webkit-dll. bahkan tidak menunjukkan baris pertama:

<textarea id="text2" placeholder="." rows="10"></textarea>​

kemudian tambahkan sisa baris dengan css:

#text2::-webkit-input-placeholder{
    color:transparent;
}

#text2::-webkit-input-placeholder::before {
    color:#666;
    content:"Line 1\A Line 2\A Line 3\A";
}

Demo Fiddle

Akan sangat bagus, jika demikian bisa mendapatkan demo serupa bekerja di Firefox.

Jika Anda menggunakan AngularJS, Anda bisa menggunakan kawat gigi untuk meletakkan apa pun yang Anda suka di dalamnya: Ini biola.

<textarea rows="6" cols="45" placeholder="{{'Address Line1\nAddress Line2\nCity State, Zip\nCountry'}}"></textarea>

Menurut MDN ,

Pengembalian kereta atau umpan baris dalam teks placeholder harus diperlakukan sebagai jeda baris saat memberikan petunjuk.

Ini berarti bahwa jika Anda hanya melompat ke baris baru, itu harus diterjemahkan dengan benar. Yaitu

<textarea placeholder="The car horn plays La Cucaracha.
You can choose your own color as long as it's black.
The GPS has the voice of Darth Vader.
"></textarea> 

harus membuat seperti ini:

The HTML5 spesifikasi tegas menolak baris baru di bidang tempat dudukan. Versi Webkit / akan / menyisipkan baris baru saat disajikan dengan umpan baris di placeholder, namun ini adalah perilaku yang salah dan tidak boleh diandalkan.

Saya kira paragraf tidak cukup singkat untuk w3;)

Reaksi:

Jika Anda menggunakan Bereaksi, Anda dapat melakukannya sebagai berikut:

placeholder={'Address Line1\nAddress Line2\nCity State, Zip\nCountry'}

Jika Anda textareamemiliki lebar statis, Anda dapat menggunakan kombinasi ruang tidak putus dan pembungkus teks otomatis. Cukup ganti spasi ke nbsp untuk setiap baris dan pastikan bahwa dua garis tetangga tidak dapat masuk ke dalam satu baris. Dalam praktek line length > cols/2.

Ini bukan cara terbaik, tetapi bisa menjadi satu-satunya solusi lintas-browser.

<textarea class="textAreaMultiligne" 
          placeholder="Hello,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; This&nbsp;is&nbsp;multiligne&nbsp;example Have&nbsp;Fun&nbsp;&nbsp;&nbsp;&nbsp;"
          rows="5" cols="35"></textarea>

Anda dapat mencoba menggunakan CSS, itu berfungsi untuk saya. Atribut placeholder=" "diperlukan di sini.

<textarea id="myID" placeholder=" "></textarea>
<style>
#myID::-webkit-input-placeholder::before {
    content: "1st line...\A2nd line...\A3rd line...";
}
</style>

dalam php dengan fungsi chr (13):

echo '<textarea class="form-control" rows="5" style="width:100%;" name="responsable" placeholder="NOM prénom du responsable légal'.chr(13).'Adresse'.chr(13).'CP VILLE'.chr(13).'Téléphone'.chr(13).'Adresse de messagerie" id="responsable"></textarea>';

Saya tidak berpikir itu mungkin dengan html / css saja. Mungkin dimungkinkan menggunakan JavaScript atau sejenis hack lainnya - ruang ekstra untuk mendorong teks ke baris berikutnya, dll.

Bootstrap + contenteditable + placeholder multiline

Demo: https://jsfiddle.net/39mptojs/4/

berdasarkan jawaban @cyrbil dan @daniel

Menggunakan Bootstrap, jQuery, dan https://github.com/gr2m/bootstrap-expandable-input untuk mengaktifkan placeholder di contenteditable.

Menggunakan javascript "placeholder replace" dan menambahkan "white-space: pre" ke css, placeholder multiline ditampilkan.

Html:

<div class="form-group">
    <label for="exampleContenteditable">Example contenteditable</label>
    <div id="exampleContenteditable" contenteditable="true" placeholder="test\nmultiple line\nhere\n\nTested on Windows in Chrome 41, Firefox 36, IE 11, Safari 5.1.7 ...\nCredits StackOveflow: .placeholder.replace() trick, white-space:pre" class="form-control">
    </div>
</div>

Javascript:

$(document).ready(function() {
    $('div[contenteditable="true"]').each(function() {
        var s=$(this).attr('placeholder');
        if (s) {
            var s1=s.replace(/\\n/g, String.fromCharCode(10));
            $(this).attr('placeholder',s1);
        }
    });
});

Css:

.form-control[contenteditable="true"] {
    border:1px solid rgb(238, 238, 238);
    padding:3px 3px 3px 3px;
    white-space: pre !important;
    height:auto !important;
    min-height:38px;
}
.form-control[contenteditable="true"]:focus {
    border-color:#66afe9;
}

Solusi watermark pada postingan asli berfungsi dengan baik. Terimakasih untuk ini. Jika ada yang membutuhkannya, berikut adalah arahan sudut untuknya.

(function () {
  'use strict';

  angular.module('app')
    .directive('placeholder', function () {
      return {
        restrict: 'A',
        link:     function (scope, element, attributes) {
          if (element.prop('nodeName') === 'TEXTAREA') {
            var placeholderText = attributes.placeholder.trim();

            if (placeholderText.length) {
              // support for both '\n' symbol and an actual newline in the placeholder element
              var placeholderLines = Array.prototype.concat
                .apply([], placeholderText.split('\n').map(line => line.split('\\n')))
                .map(line => line.trim());

              if (placeholderLines.length > 1) {
                element.watermark(placeholderLines.join('<br>\n'));
              }
            }
          }
        }
      };
    });
}());