Можете ли вы иметь многострочный текст HTML5-заполнителя в <textarea>?

Question

У меня есть текст-привидение в текстовых полях, которые исчезают, когда вы фокусируете их, используя атрибут-заполнитель HTML5:

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

Я хочу использовать тот же механизм для создания многострочного текста-заполнителя в текстовой области, возможно, что-то вроде этого:

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

Но эти \n отображаются в тексте и не вызывают новых строк ... Есть ли способ иметь многострочный заполнитель?

ОБНОВЛЕНИЕ : Единственный способ заставить это работать - использовать плагин jQuery Watermark , который принимает HTML в тексте заполнителя:

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

Answer 1

Спецификация не допускает символы перевода строки или возврата каретки.

Атрибут placeholder представляет краткую подсказку (слово или короткую фразу), предназначенную, чтобы помочь пользователю сввод данных.Подсказка может быть примером значения или кратким описанием ожидаемого формата.Атрибут, если он указан, должен иметь значение, которое не содержит символов U + 000A LINE FEED (LF) или U + 000D ВОЗВРАЩАЮЩЕЙСЯ (CR).

По-видимому, рекомендуется использовать title атрибут для чего-либо более длинного.

Для более длинной подсказки или другого консультативного текста более подходящим является атрибут заголовка.

РЕДАКТИРОВАТЬ (1/8 /18):

Для <textarea> это не так.Спецификация фактически указывает, что возврат каретки + разрывы строк ДОЛЖНЫ отображаться браузером как таковые.

Пользовательские агенты должны представлять эту подсказку пользователю, когда значением элемента является пустая строка, а элемент управления не являетсясфокусированный (например, отображая его внутри пустого не сфокусированного элемента управления).Должны быть обработаны все пары символов U + 000D ВОЗВРАТ УСТРОЙСТВА U + 000A LINE FEED (CRLF) в подсказке, а также все другие символы возврата U + 000D CARRIAGE (CR) и U + 000A LINE FEED (LF) в подсказкеразрыв строки при рендеринге подсказки.

См. документы: http://w3c.github.io/html/sec-forms.html#element-attrdef-textarea-placeholder
Также отражено в MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea

FWIW, когда я пробую Chrome 63.0.3239.132, он действительно работает так, как говорит.

Answer 2

В большинстве (см. Подробнее ниже) браузеров, редактирование местозаполнителя в javascript делает возможным многострочное заполнение. Как уже было сказано, она не соответствует спецификации , и вы не должны ожидать, что она будет работать в будущем (правка: она работает).

Этот пример заменяет all заполнитель многострочной текстовой области.

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 фрагмент.}

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

---

Судя по комментариям, некоторые браузеры принимают этот взлом, а другие нет.
Это результат моих тестов (с 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)
• Опера: Нет (проверено <= 15.0.1147.72) </li>

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

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

Answer 3

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

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

Answer 4

Существует настоящий хак, который позволяет добавлять многострочные заполнители в браузеры 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";
}

---

Демонстрационная скрипка

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

Answer 5

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

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

Answer 6

Спецификация html5 явно отклоняет новые строки в поле заполнителя.Версии Webkit / will / вставляют новые строки при представлении с символами перевода строки в заполнителе, однако это неправильное поведение и на него не следует полагаться.

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

Answer 7

Если ваш 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>

Answer 8

Согласно MDN ,

Перевод каретки или перевод строки в тексте-заполнителе должны рассматриваться как разрывы строк при отображении подсказки.

Это означает, что если вы просто перейдете на новую строку, она должна отображаться правильно. * 1009 Т.е. *

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

должно отображаться так:

Answer 9

Реагировать:

Если вы используете React, вы можете сделать это следующим образом:

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

Answer 10

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

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