Czy możesz mieć wielowierszowy tekst zastępczy HTML5 w <textarea>?

Mam tekst widmowy w polach tekstowych, który znika, gdy skupisz się na nich za pomocą atrybutu zastępczego HTML5:

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

Chcę użyć tego samego mechanizmu, aby mieć wielowierszowy tekst zastępczy w obszarze tekstu, może coś takiego:

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

Ale te \nznaki pojawiają się w tekście i nie powodują nowych linii ... Czy istnieje sposób, aby mieć wielowierszowy symbol zastępczy?

AKTUALIZACJA : Jedynym sposobem, w jaki udało mi się to uruchomić, było użycie wtyczki jQuery Watermark , która akceptuje HTML w tekście zastępczym:

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

W przypadku <textarea>s specyfikacja wyraźnie określa, że ​​powrót karetki + podziały wierszy w atrybucie zastępczym MUSZĄ być renderowane przez przeglądarkę jako podziały wierszy.

Programy użytkownika powinny przedstawiać tę wskazówkę użytkownikowi, gdy wartością elementu jest pusty ciąg, a kontrolka nie jest fokusem (np. Wyświetlając ją wewnątrz pustej nieostrej kontrolki). Wszystkie znaki U + 000D CARRIAGE RETURN U + 000A LINE FEED (CRLF) w podpowiedzi, a także wszystkie inne znaki U + 000D CARRIAGE RETURN (CR) i U + 000A LINE FEED (LF) w podpowiedzi muszą być traktowane jako podziały wierszy podczas renderowania wskazówki.

Odzwierciedlone również w MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder

FWIW, kiedy próbuję na Chrome 63.0.3239.132, rzeczywiście działa tak, jak powinien.

W większości przeglądarek (zobacz szczegóły poniżej) edycja symbolu zastępczego w javascript pozwala na użycie wielowierszowego symbolu zastępczego. Jak już powiedziano, nie jest zgodny z specyfikacją i nie należy oczekiwać, że zadziała w przyszłości (edytuj: działa).

Ten przykład zastępuje wszystkie symbole zastępcze obszaru tekstu wielowierszowego.

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>

_{JsFiddle snippet.}

Na podstawie komentarzy wydaje się, że niektóre przeglądarki akceptują ten hack, a inne nie.
To są wyniki testów, które przeprowadziłem (ze zrzutami przeglądarki i stosem przeglądarki )

• Chrome:> = 35.0.1916.69
• Firefox:> = 35.0 (wyniki różnią się w zależności od platformy)
• IE:> = 10
• Przeglądarki oparte na KHTML: 4.8
• Safari: Nie (testowano = Safari 8.0.6 Mac OS X 10.8)
• Opera: Nie (przetestowano <= 15.0.1147.72)

W połączeniu z tymi statystykami oznacza to, że działa na około 88,7% obecnie (październik 2015) przeglądarek używanych.

Aktualizacja : Dziś działa na co najmniej 94,4% obecnie (lipiec 2018 r.) Używanych przeglądarek.

Uważam, że jeśli wykorzystasz dużo spacji, przeglądarka odpowiednio ją zapakuje. Nie martw się o użycie dokładnej liczby spacji, po prostu wrzuć tam dużo, a przeglądarka powinna poprawnie zawinąć do pierwszego znaku innego niż spacja w następnej linii.

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

Rzeczywiście istnieje hack, który umożliwia dodawanie wielowierszowych symboli zastępczych w przeglądarkach Webkit, Chrome działał, ale w nowszych wersjach usunęli go:

Najpierw jak zwykle dodaj pierwszy wiersz swojego symbolu zastępczego do HTML5

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

następnie dodaj resztę linii przez css:

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

Jeśli chcesz zachować swoje linie w jednym miejscu, możesz spróbować następujących rozwiązań. Wadą tego jest to, że inne przeglądarki niż Chrome, Safari, Webkit itp. nawet nie pokazuj pierwszej linii:

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

następnie dodaj resztę linii przez 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

Byłoby wspaniale, gdyby tak można było uzyskać podobne demo działające na Firefoksie.

Jeśli używasz AngularJS, możesz po prostu użyć nawiasów klamrowych, aby umieścić w nim wszystko, co chcesz: Oto skrzypce.

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

Według MDN ,

Powroty karetki lub przesunięcia wiersza w tekście zastępczym muszą być traktowane jako znaki końca wiersza podczas renderowania wskazówki.

Oznacza to, że jeśli po prostu przeskoczysz do nowej linii, powinna zostać poprawnie wyrenderowana. To znaczy

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

powinien wyglądać następująco:

Specyfikacja HTML5 wyraźnie odrzuca nowe wiersze w polu zastępczym. Wersje Webkit / will / insert new lines, gdy są przedstawiane z wysuwami wiersza w symbolu zastępczym, jednak jest to nieprawidłowe zachowanie i nie należy na nim polegać.

Myślę, że akapity nie są wystarczająco krótkie dla w3;)

Reagować:

Jeśli używasz Reacta, możesz to zrobić w następujący sposób:

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

Jeśli textareamasz statyczną szerokość, możesz użyć kombinacji nierozdzielającej spacji i automatycznego zawijania obszaru tekstu. Po prostu zamień spacje na nbsp dla każdej linii i upewnij się, że dwie sąsiednie linie nie pasują do jednej. W praktyce line length > cols/2.

To nie jest najlepszy sposób, ale może to być jedyne rozwiązanie dla różnych przeglądarek.

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

Możesz spróbować użyć CSS, to działa dla mnie. Atrybut placeholder=" "jest tutaj wymagany.

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

w php z funkcją 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>';

Nie sądzę, żeby było to możliwe przy samym html / css. Może to być możliwe przy użyciu JavaScript lub innego rodzaju hackowania - dodatkowe spacje, aby przesunąć tekst do następnej linii itp.

Bootstrap + możliwość edycji treści + wielowierszowy symbol zastępczy

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

na podstawie odpowiedzi @cyrbil i @daniel

Korzystanie z Bootstrap, jQuery i https://github.com/gr2m/bootstrap-expandable-input aby włączyć symbol zastępczy w contenteditable.

Używając javascript „zastępczy symbol zastępczy” i dodając „odstępy: pre” do css, wyświetlany jest wielowierszowy symbol zastępczy.

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

Rozwiązanie znaku wodnego w oryginalnym poście działa świetnie. Dzięki za to. Na wypadek, gdyby ktoś tego potrzebował, oto dyrektywa kątowa.

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