Может у вас есть многострочный в HTML5 шаблонный текст?

On большинство (см. подробно ниже) браузеры, редактирование заполнителя в javascript do позволяет использовать многострочный заполнитель. Как уже было сказано, это не соответствует спецификация и вы не должны ожидать, что он будет работать в будущем (edit: it does work).

в этом примере заменить все заполнитель многострочного текстового поля.

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>

Ожидаемый результат

---

на основе замечаний кажется, некоторые браузер принимает этот хак, а другие нет.
Это результат тестов, которые я провел (с browsertshots и browserstack)

• Chrome: >= 35.0.1916.69
• Firefox: >= 35.0 (результаты варьируются на платформе)
• IE: >= 10
• браузеры на основе KHTML: 4.8
• Safari: нет (протестировано = Safari 8.0.6 Mac OS X 10.8)
• Opera: нет (проверено

базы статистика, это означает, что он работает О о 88,7% в настоящее время (октябрь 2015 года) используемых браузеров.

обновление: сегодня он работает, по крайней мере 94,4% в настоящее время (июль 2018) используемых браузеров.

Я считаю, что если вы используете много пробелов, браузер будет обернуть его правильно. Не беспокойтесь об использовании точного количества пробелов, просто бросьте туда много, и браузер должен правильно обернуть первый символ без пробела на следующей строке.

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

существует фактический хак, который позволяет добавлять многострочные заполнители в браузерах Webkit, Chrome используется для работы, но в более поздних версиях они удалили его:

---

Сначала добавьте первую строку вашего заполнителя в html5 как обычно

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

затем добавьте остальную часть строки с помощью css:

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

---

если вы хотите сохранить ваши линии в одном месте, вы можете попробовать следующие. Недостатком этого является то, что другие браузеры, кроме chrome, safari, webkit и др. даже не показывайте первую строку:

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

затем добавьте остальную часть строки с помощью css:

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

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

---

Демо-Скрипка

было бы очень здорово, если бы s.o. мог получить аналогичную демо-версию, работающую на Firefox.

The html5 spec явно отклоняет новые строки в поле место держателя. Версии Webkit / will/ вставьте новые строки, когда они представлены с помощью линейных каналов в заполнителе, однако это неправильное поведение и не следует полагаться.

Я думаю, что абзацы недостаточно короткие для w3;)

Если textarea имеют статическую ширину вы можете использовать комбинацию неразрывного пространства и автоматического переноса текстового поля. Просто замените пробелы на nbsp для каждой строки и убедитесь, что две соседние строки не могут поместиться в одну. На практике line length > cols/2.

Это не лучший способ, но может быть только кросс-браузер решение.

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

Если вы используете AngularJS, вы можете просто использовать фигурные скобки, чтобы разместить все, что вы хотели бы в нем: вот скрипка.

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

вы можете попробовать использовать CSS, это работает для меня. Атрибут placeholder=" " здесь требуется.

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

Я не думаю, что это возможно только с html/css. Возможно, можно использовать JavaScript или какой - то другой вид взлома-дополнительные пробелы, чтобы подтолкнуть текст к следующей строке и т. д.

Bootstrap + contenteditable + многострочный заполнитель

демо: https://jsfiddle.net/39mptojs/4/

на основе ответа @cyrbil и @daniel

С помощью Bootstrap, jQuery и https://github.com/gr2m/bootstrap-expandable-input чтобы включить заполнитель в contenteditable.

используя" заполнитель заменить "javascript и добавив" пробел: pre " в css, многострочный заполнитель является показанный.

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

в php с функцией 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, вы можете сделать это следующим образом:

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

решение водяного знака в исходном сообщении отлично работает. Спасибо за это. Если кому-то это нужно, вот угловая директива для него.

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