Czy możesz mieć wielowierszowy tekst zastępczy HTML5 w formacie a?

Na większości (Zobacz szczegóły poniżej) przeglądarek, edycja elementu zastępczego w javascript do pozwala na wielowierszowy Element Zastępczy. Jak już zostało powiedziane, nie jest zgodny ze specyfikacją i nie powinieneś oczekiwać, że będzie działać w przyszłości (edit: it does work).

Ten przykład zastępuje wszystkie Wielowierszowe pola tekstowe.

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>

Na podstawie komentarzy wydaje się, że jakaś przeglądarka akceptuje ten hack, a inne Nie.
Jest to wynik testów, które przeprowadziłem (z browsertshots i browserstack )

• 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
[[24]}Safari: nie (testowane = Safari 8.0.6 Mac OS X 10.8)
• Opera: No (tested

Bazuje na statystyce , oznacza to, że działa na około 88.7% obecnie (Październik 2015) używane przeglądarki.

Update: Dzisiaj działa na co najmniej 94.4% obecnie (lipiec 2018) używane przeglądarki.

Uważam, że jeśli użyjesz dużej ilości spacji, przeglądarka zawiąże ją poprawnie. Nie martw się o użycie dokładnej liczby spacji, po prostu wrzuć tam dużo, a przeglądarka powinna prawidłowo zawijać do pierwszego znaku bez spacji w następnej linii.

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

Jest rzeczywiście hack, który umożliwia dodawanie wielowierszowych elementów zastępczych w przeglądarkach Webkit, Chrome kiedyś działał, ale w nowszych wersjach usunięto go:

Najpierw dodaj pierwszą linię placeholdera do html5 jak zwykle

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

Następnie dodaj resztę linii za pomocą 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. Minusem tego jest to, że inne przeglądarki niż chrome, safari, webkit-itp. nawet nie pokazuj pierwszy wiersz:

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

Następnie dodaj resztę linii za pomocą 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 bardzo dobrze, gdyby s. o. mógł dostać podobne demo działające na Firefoksie.

Specyfikacja HTML5 wyraźnie odrzuca nowe linie w polu place holder. Wersje Webkit / będą / wstawiać nowe wiersze, gdy zostaną przedstawione z kanałami line feeds w miejscu zastępczym, jednak jest to nieprawidłowe zachowanie i nie należy na tym polegać.

Chyba akapity nie są wystarczająco krótkie na w3 ;)

Jeśli twoja textarea ma statyczną szerokość, możesz użyć kombinacji nierozłamujących spacji i automatycznego owijania obszaru tekstowego. Po prostu zamień spacje na nbsp dla każdej linii i upewnij się, że dwie sąsiadujące linie nie pasują do jednej. W praktyce line length > cols/2.

To nie jest najlepszy sposób, ale może być jedynym rozwiązaniem między przeglądarkami.

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

Jeśli używasz AngularJS, możesz po prostu użyć szelek, aby umieścić w nim cokolwiek chcesz: Oto skrzypce.

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

Myślę, że nie jest to możliwe tylko z html / css. Może być możliwe użycie JavaScript lub innego rodzaju hack-dodatkowe spacje, aby przesunąć tekst do następnej linii, itp.

Bootstrap + contenteditable + multiline placeholder

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

Na podstawie odpowiedzi @ cyrbil i @ daniel

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

Używając" placeholder replace "javascript i dodając" white-space: pre " do css, multiline placeholder jest pokazane.

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

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

React:

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

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

Rozwiązanie znaku wodnego w oryginalnym poście działa świetnie. Dzięki za to. W razie gdyby ktoś tego potrzebował, oto kanciasta dyrektywa.

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