Чи можете ви містити багаторядковий текст заповнення HTML5 у <textarea>?


152

У текстових полях я маю текст-привид, який зникає, коли ви зосереджуєтесь на них за допомогою атрибута заповнення 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});

IE, здається, справляється з цим належним чином. Firefox OTOH просто ігнорує нові рядки
ekkis

1
stackoverflow.com/questions/7312623/… - дуже схоже запитання і з хорошими відповідями.
Ллойд Девульф

якщо ви зіткнулися з цим і використовуєте js для встановлення css white-spaceдля перевірки значення, щоб переконатися, що він встановлений правильно, наприклад, попереднє обгортання
Cory Mawhorter

З того іншого питання: &#10;працює скрізь, крім Safari.
Сфінкс

Відповіді:


82

Для <textarea>s специфікація конкретно окреслює, що повернення каретки + розриви рядків у атрибуті заповнювача ОБОВ'ЯЗКОВО відображаються браузером у вигляді перерив рядків.

Користувацькі агенти повинні представляти користувачеві цей підказку, коли значенням елемента є порожній рядок і елемент керування не зосереджений (наприклад, відображаючи його всередині порожнього нефокусованого елемента управління). Усі символи U + 000D ПОВЕРНЕННЯ КАРАЖУ U + 000A LINE FEED символи (CRLF) у підказці, а також усі інші символи U + 000D ПОВЕРНЕННЯ КАРАЖ (CR) та U + 000A LINE FEED (LF) у підказці повинні бути оброблені як розрив рядка під час надання підказки.

Також відображено на MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder

FWIW, коли я приміряю Chrome 63.0.3239.132, він справді працює так, як каже, що слід.


37
за винятком того, що атрибут заголовка веде себе не однаково, тобто він не показує вміст привидів. насправді було б цілком доречно, щоб заповнювачі місць підтримували кілька рядків для текстових областей, оскільки текстові області є багаторядковими істотами. шкода, що специфікація цього не дозволяє. Гадаю, хаки доведеться робити. зітхання
еккіс

71

У більшості веб-переглядачів (див. Деталі нижче) редагування заповнювача у javascript дозволяє багаторядковий заповнювач. Як було сказано, він не відповідає специфікації, і не слід очікувати, що він буде працювати в майбутньому (редагувати: він працює).

Цей приклад замінює всі заповнювачі міток рядка textarea.

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

Очікуваний результат

Очікуваний результат


На підставі коментарів здається, що деякий браузер приймає цей злом, а інші - ні.
Це результати тестів, які я проводив (із знімками зображень браузера і стек браузера )

  • Chrome:> = 35.0.1916.69
  • Firefox:> = 35.0 (результати залежать від платформи)
  • IE:> = 10
  • Браузери на основі KHTML: 4.8
  • Safari: Ні (тестовано = Safari 8.0.6 Mac OS X 10.8)
  • Opera: Ні (перевірено <= 15.0.1147.72)

Злившись із статистикою тез , це означає, що вона працює приблизно на 88,7% використовуваних у даний час браузерів (жовтня 2015 року) .

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


1
Цей приклад jsfiddle взагалі не працює ... Це лише багатомовний, оскільки розмір textarea.
sebnukem

2
Існує помилка друку, але я не можу редагувати, оскільки StackOverflow дає мені цю помилку "Редагування має бути принаймні на 6 символів". Ваш клас повинен бути multilineНЕmultiligne
Даніель Кіко

@sebnukem: Він працює на більшості браузерів, які я перевірив. І справа не в розмірі textarea. Чи можете ви надати більше інформації щодо проблеми, яка ви мали?
Кирбіль

Не працює на сафарі, здається ... - \ n зникає, але все в одному рядку
Хекрон

1
@Jroonk: Я можу це підтвердити. Це пов'язано не з хромом, а Apple змушує будь-який браузер використовувати свої IOS WKWebView. Згодом будь-який веб-переглядач на IOS не виправить цей злом належним чином, поки WKWebViewне стане .
Кірбіл

59

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

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

2
Так, багатополосні заповнювачі не підтримують крос-браузер, знайшли останню підтримку сафарі, але це точно не підтримується на IOS5
Том

7
це не працює для мене ні в IE, ні в Firefox Windows. він просто вставляє пробіли, про які я попросив його
ekkis

Chrome 37 відображає текст заповнювача в текстовій області, не знімаючи нові рядки. Хтось знає, що таке назва функції, щоб я міг а) шукати її і б) перевіряти її?
Бен

23

Існує власне хак, який дає змогу додавати багаторядкові заповнювачі у веб-переглядачах 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.


дякую за надання скрипкового посилання. це дозволяє легко перевірити поведінку в різних браузерах. на IE 10 обидві версії виходять з ладу, як і на FF 12 (Windows). шкода, що. Safari 6.1 працює :(
ekkis

Більше не працює в Chrome - давно я б припустив.
Майк Рокет

6

Якщо ви використовуєте AngularJS, ви можете просто використовувати дужки, щоб розмістити в ньому все, що завгодно: ось загадка.

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

1
Я використовую подібний підхід, але він не працює в Safari та Firefox
стан

6

За даними MDN ,

Повернення перевезення або канали рядків у тексті заповнення повинні розглядатися як розриви рядків під час надання підказки.

Це означає, що якщо ви просто перейдете на новий рядок, він повинен бути відображений правильно. Тобто

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

має відображатись так:

введіть тут опис зображення


3

Специфікація html5 прямо відхиляє нові рядки в полі власника місця. Версії Webkit / will / вставляють нові рядки, коли вони містять канали рядків у заповнювачі, проте це неправильна поведінка, і на неї не слід покладатися.

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


1
Поведінка Webkit є невірною, оскільки специфікація не говорить про те, що повинно відбутися, якщо CR / LF існують.
Крістіан

1
@Christian Це робить зараз, він говорить: "Агенти користувачів повинні представити цей підказку користувачеві, після того, як з нього буде відірвано перервану лінію ...". Це говорить про розриви розривів рядків: "Коли користувальницький агент повинен знімати розриви рядка з рядка, агент користувача повинен видалити будь-які символи" LF "(U + 000A) і" CR "(U + 000D) з цього рядка. ".
Річард Тернер

Ця відповідь більше не відповідає дійсності. Тепер специфікація прямо вимагає, щоб розриви рядків у заповнювачі заповнювались як переривання рядків.
Клонкекс

3

Реагуйте:

Якщо ви використовуєте React, ви можете це зробити так:

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

2

Якщо у вас 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>


1

Ви можете спробувати використовувати CSS, він працює для мене. Тут placeholder=" "необхідний атрибут .

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

1

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

0

Я не думаю, що це можливо лише в html / css. Можливо, можливо, за допомогою JavaScript або якогось іншого виду хак - додаткові пробіли для переведення тексту до наступного рядка тощо.


0

Завантажувальна програма + вміст + багаторядковий заповнювач

Демонстрація: https://jsfiddle.net/39mptojs/4/

на основі відповіді @cyrbil та @daniel

Використовуючи Bootstrap, jQuery та https://github.com/gr2m/bootstrap-expandable-input, щоб увімкнути заповнювач місць, що містить вміст.

Використовуючи javascript "заміни заповнювача заповнення" та додавши до 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;
}

-1

Рішення з водяними знаками в оригінальній публікації чудово працює. Дякую за це. Якщо комусь це потрібно, ось ця кутова директива для нього.

(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'));
              }
            }
          }
        }
      };
    });
}());
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.