Я спробував кілька підходів, але жоден не спрацював. Хтось знає чудовий трюк, щоб обійти це?

<textarea placeholder='This is a line \n this should be a new line'></textarea>

<textarea placeholder='This is a line     
should this be a new line?'></textarea> <!-- this works in chrome apparently -->

ОНОВЛЕННЯ: Це не працює в хромі. Це була просто ширина текста.

Дивіться: http://jsfiddle.net/pdXRx/

Що ви можете зробити, це додати текст як value, який поважає розрив рядка \n.

$('textarea').attr('value', 'This is a line \nthis should be a new line');

Потім ви можете зняти його focusта застосувати назад (якщо він порожній) blur. Щось на зразок цього

var placeholder = 'This is a line \nthis should be a new line';
$('textarea').attr('value', placeholder);

$('textarea').focus(function(){
    if($(this).val() === placeholder){
        $(this).attr('value', '');
    }
});

$('textarea').blur(function(){
    if($(this).val() ===''){
        $(this).attr('value', placeholder);
    }    
});

Приклад: http://jsfiddle.net/airandfingers/pdXRx/247/

Не чистий CSS і не чистий, але робить трюк.

Ви можете вставити новий об’єкт html-рядка 
всередині атрибута заповнення:

<textarea name="foo" placeholder="hello you&#10;Second line&#10;Third line"></textarea>

Працює на: Chrome 62, IE10, Firefox 60

Не працює на: Safari 11

https://jsfiddle.net/lu1s/bxkjLpag/2/

Не думайте, що вам це дозволяється: http://www.w3.org/TR/html5/forms.html#the-placeholder-attribute

Відповідний зміст (моє наголос):

Атрибут заповнення заповнення являє собою коротку підказку (слово або коротку фразу), призначену для допомоги користувачеві з введенням даних, коли елемент керування не має значення. Підказка може бути зразковим значенням або коротким описом очікуваного формату. Якщо зазначений атрибут, він повинен мати значення, яке не містить символів U + 000A LINE FEED (LF) або U + 000D POVURN CARRIAGE (CR).

ОНОВЛЕННЯ (січень 2016): Гарний маленький хак може більше не працювати у всіх браузерах, тому в мене нижче є нове рішення з крихітним шматочком javascript.

Гарний маленький хак

Це не добре, але ви можете просто помістити нові рядки в html. Подобається це:

<textarea rows="6" id="myAddress" type="text" placeholder="My Awesome House,
        1 Long St
        London
        Postcode
        UK"></textarea>

Зверніть увагу, що кожен рядок знаходиться в новому рядку (не загортається), і кожен відступ "вкладки" має 4 пробіли. Звичайно, це не дуже приємний метод, але він, здається, працює:

http://jsfiddle.net/01taylop/HDfju/

• Цілком ймовірно, що рівень відступу кожного рядка буде змінюватися залежно від ширини вашої області тексту.
• Важливо мати resize: none;в css, щоб розмір textarea був фіксованим (див. Jsfiddle).

Як альтернативи Якщо ви хочете нову лінію, вдарив повернення в два рази (Так що є порожній рядок між вашими "новими лініями. Ця« порожній рядок » , створеної потреби мати достатню кількість вкладок / прогалин , які прирівнюються до ширини вашого текстового поля. Це Байдуже Мабуть, не має значення, якщо їх занадто багато, тобі просто потрібно достатньо. Це так брудно, але, ймовірно, не сумісний із браузером. Я б хотів, щоб був простіший спосіб!

Краще рішення

Перевір JSFiddle .

• Це рішення позиціонує діву за текстовою областю.
• Деякі javascript використовуються для зміни кольору фону текстової області, приховування або виявлення заповнювача місця.
• Введення та заповнювачі повинні мати однакові розміри шрифту, отже, два комбінації.
• В box-sizingі display: blockвластивості на текстове поле є важливими або ДІВ за ним не буде мати той же розмір.
• Налаштування resize: verticalта min-heightпозначення на текстовій області також важливі - зауважте, як текст заповнювача загортається, а розширення текстової області зберігатиме білий фон. Однак коментування цього resizeресурсу спричинить проблеми при горизонтальному розширенні текстової області.
• Просто переконайтеся, що мінімальна висота на текстовій області є достатньою, щоб покрити весь заповнювач на найменшій ширині. **

HTML:

<form>
  <input type='text' placeholder='First Name' />
  <input type='text' placeholder='Last Name' />
  <div class='textarea-placeholder'>
    <textarea></textarea>
    <div>
      First Line
      <br /> Second Line
      <br /> Third Line
    </div>
  </div>
</form>

SCSS:

$input-padding: 4px;

@mixin input-font() {
  font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  font-size: 12px;
  font-weight: 300;
  line-height: 16px;
}

@mixin placeholder-style() {
  color: #999;
  @include input-font();
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

form {
  width: 250px;
}

input,textarea {
  display: block;
  width: 100%;
  padding: $input-padding;
  border: 1px solid #ccc;
}

input {
  margin-bottom: 10px;
  background-color: #fff;

  @include input-font();
}

textarea {
  min-height: 80px;
  resize: vertical;
  background-color: transparent;
  &.data-edits {
    background-color: #fff;
  }
}

.textarea-placeholder {
  position: relative;
  > div {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: $input-padding;
    background-color: #fff;
    @include placeholder-style();
  }
}

::-webkit-input-placeholder {
  @include placeholder-style();
}
:-moz-placeholder {
  @include placeholder-style();
}
::-moz-placeholder {
  @include placeholder-style();
}
:-ms-input-placeholder {
  @include placeholder-style();
}

Javascript:

$("textarea").on('change keyup paste', function() {
  var length = $(this).val().length;
  if (length > 0) {
    $(this).addClass('data-edits');
  } else {
    $(this).removeClass('data-edits');
  }
});

Як щодо рішення CSS: http://cssdeck.com/labs/07fwgrso

::-webkit-input-placeholder::before {
  content: "FIRST\000ASECOND\000ATHIRD";
}

::-moz-placeholder::before {
  content: "FIRST\000ASECOND\000ATHIRD";
}

:-ms-input-placeholder::before {
  content: "FIRST\000ASECOND\000ATHIRD";
}

Салаамун Алекум




Працює для Google Chrome

<textarea placeholder="Enter Choice#1 &#10;Enter Choice#2 &#10;Enter Choice#3"></textarea>

Я перевірив це на Windows 10.0 (Build 10240) та Google Chrome версії 47.0.2526.80 m

08:43:08 AST 6 Рабі Аль-Аввал, 1437, четвер, 17 грудня 2015 року

Спасибі

Додайте лише & # 10 для розриву рядка, не потрібно писати CSS або javascript.

textarea{
    width:300px;
    height:100px;

}

<textarea placeholder='This is a line this &#10should be a new line'></textarea>

<textarea placeholder=' This is a line 

should this be a new line?'></textarea>

Стара відповідь:

Ні, ви не можете цього зробити в атрибуті заповнення. Ви навіть не можете кодувати html нові рядки, як 
у заповнювачі.

Нова відповідь:

Сучасні браузери дають кілька способів зробити це. Дивіться цей JSFiddle:

http://jsfiddle.net/pdXRx/5/

Використання 
замість \nцього змінить лінію.

Спробуйте це:

<textarea
placeholder="Line1&#x0a;&#x09;&#x09;&#x09;Line2"
cols="10"
rows="5"
style="resize:none">
</textarea>

http://jsfiddle.net/vr79B/

Ви не можете зробити це з чистим HTML, але цей плагін jQuery дозволить вам: https://github.com/bradjasper/jQuery-Placeholder-Newlines

Трохи вдосконалена версія відповіді Джейсона Геннаро (див. Коментарі до коду):

var placeholder = 'This is a line \nthis should be a new line';
$('textarea').attr('value', placeholder);
$('textarea').focus(function(){
    if($(this).val() == placeholder){
        // reset the value only if it equals the initial one    
        $(this).attr('value', '');
    }
});
$('textarea').blur(function(){
    if($(this).val() == ''){
        $(this).attr('value', placeholder);
    }    
});
// remove the focus, if it is on by default
$('textarea').blur();

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

http://jsfiddle.net/pdXRx/297/

<h1>Demo: 5 different textarea placeholder behaviors from a single JS</h1>

<h2>Modified behaviors</h2>

<!-- To get simulated placeholder with New Lines behavior,
     add the placeholdernl attribute -->

<textarea placeholdernl>    (click me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134</textarea>

<textarea placeholder='Address' placeholdernl>    (click me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134</textarea>

<h2>Standard behaviors</h2>

<textarea placeholder='Address'>    (delete me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134</textarea>

<textarea>    (delete me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134</textarea>

<textarea placeholder='Address'></textarea>

Javascript дуже простий

<script>
(function($){
var handleFocus = function(){
    var $this = $(this);
    if($this.val() === $this.attr('placeholdernl')){
        $this.attr('value', '');
        $this.css('color', '');
    }
};

var handleBlur = function(){
    var $this = $(this);
    if($this.val() == ''){
        $this.attr('value', $this.attr('placeholdernl'))
        $this.css('color', 'gray');
    }    
};

$('textarea[placeholdernl]').each(function(){
    var $this = $(this),
        value = $this.attr('value'),
        placeholder = $this.attr('placeholder');
    $this.attr('placeholdernl', value ? value : placeholder);
    $this.attr('value', '');
    $this.focus(handleFocus).blur(handleBlur).trigger('blur');
});
})(jQuery);
</script>

HTML

<textarea data-placeholder="1111\n2222"></textarea>

JS

$('textarea[data-placeholder]').each(function(){
    var $this = $(this),
        placeholder = $this.data('placeholder'),
        placeholderSplit = placeholder.split('\\n');
    placeholder = placeholderSplit.join('\n');
    $this.focus(function(){
        var $this = $(this);
        if($this.val() === placeholder){
            $this.val('');
            // $this.removeClass('placeholder');
        }
    }).blur(function(){
        var $this = $(this);
        if($this.val() == '') {
            $this.val(placeholder);
            // $this.addClass('placeholder');
        }
    }).trigger('blur');
});

Textarea поважає атрибут білого простору для заповнювача. https://www.w3schools.com/cssref/pr_text_white-space.asp

Встановлення його на попередній рядок вирішило для мене проблему.

textarea {
  white-space: pre-line;
}

<textarea placeholder='This is a line     
should this be a new line'></textarea>

Я змінив загадку @ Річарда Броноського так .

Краще підходити до використання data-*атрибута, а не спеціального атрибута. Я замінив <textarea placeholdernl>на <textarea data-placeholder>і деякі інші стилі , а також.

редагується
Ось оригінальна відповідь Річарда, яка містить повний фрагмент коду.

дуже просто

  var position = your break position;
    var breakLine = "
";//in html 
    var output = [value.slice(0, position), breakLine, value.slice(position)].join('');
    return output;

значення представляють початкову рядок

Перегляньте це рішення за допомогою спеціального заповнювача.

• Ви отримуєте багаторядковий заповнювач, який працює у всіх браузерах (включаючи Firefox)
• Можна налаштувати заповнювач місця, як вам потрібно

Демо на скрипку .

$(document).on('input', '#textArea', function () {
	
        if ($('#textArea').val()) {
            $('#placeholderDiv').hide();
        } else {
            $('#placeholderDiv').show();
        }   
});

#textAreaWrap {
    position: relative;
    background-color: white;
}

#textArea {
    position: relative;
    z-index: 1;
    width: 350px;
    height: 100px;
    min-height: 100px;
    padding: 6px 12px;
    resize: vertical;
    background-color: transparent;
    /* When set background-color: transparent - Firefox  displays
    unpleasant textarea border. Set border style to fix it.*/
    border: 1px solid #a5a5a5;
}

#placeholderDiv {
    position: absolute;
    top: 0;
    padding: 6px 13px;
    color: #a5a5a5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="textAreaWrap">
    
<textarea id="textArea"></textarea>

<!-- Check here. If textarea has content -
     set for this div attribute style="display: none;" -->
<div id="placeholderDiv">Multiline textarea<br>
                         placeholder<br>
                         <br>
                         that works in Firefox</div>
    
</div>

Мені не подобається приховувати заповнювач, коли ви фокусуєте текстові області. Тому я зробив функцію конструктора, Placeholderяка точно схожа на вбудований заповнювач і працює також у інших браузерах, ніж Google Chrome. Це дуже зручно, оскільки ви можете використовувати цю Placeholderфункцію так часто, як вам потрібно, і навіть не потрібен jQuery.

Редагувати:

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

var textarea = document.getElementById("textarea");
new Placeholder(textarea, "Line 1\nLine 2\nLine 3");

function Placeholder(el, placeholder) {
    if (el.value == "" || el.value == placeholder) {
        el.style.color = "gray";
        el.value = placeholder;
        el._plc = true;
        el.className += " unselectable";
    }
    function keyPress(e) {
        window.setTimeout(function() {
            var replaced = reverseStr(el.value).replace(reverseStr(placeholder), "");
            
            if (el.value == "") {
                el.value = placeholder;
                el.style.color = "gray";
                cursorToStart(el);
                el._plc = true;
                el.className += " unselectable";
            } else if (el._plc && el.value.endsWith(placeholder) && replaced !== "") {
                el.value = reverseStr(replaced);
                el.style.color = "black";
                el._plc = false;
                el.readOnly = false;
                el.className = el.className.replace("unselectable", "");
            } else if (el._plc && el.readOnly) {
                var ch = String.fromCharCode(e.charCode);
                if (e.keyCode == 13) ch = "\n";     // ENTER
                else if (e.charCode == 0) return;   // non-character keys
                
                el.value = ch;
                el.style.color = "black";
                el._plc = false;
                el.readOnly = false;
                el.className = el.className.replace("unselectable", "");
            }
        }, 10);
    }
    el.addEventListener("keypress", keyPress, false);
    el.addEventListener("paste", keyPress, false);
    el.addEventListener("cut", keyPress, false);
    el.addEventListener("mousedown", function() {
        if (el._plc) el.readOnly = true;
    }, false);
    el.addEventListener("mouseup", function() {
        el.readOnly = false;
        if (el._plc) cursorToStart(el);
    }, false);
  
    function cursorToStart(input) {
        if (input.createTextRange) {
            var part = input.createTextRange();
            part.move("character", 0);
            part.select();
        } else if (input.setSelectionRange){
            input.setSelectionRange(0, 0);
        } input.focus();
    }
    function reverseStr(str) {
        if (!str) return "";
        return str.split("").reverse().join("");
    }
}

textarea {
    border: 1px solid gray;
    padding: 3px 6px;
    font-family: Arial;
    font-size: 13px;
    transition: .2s;
}
textarea:hover, textarea:focus {
    border-color: #2277cc;
}
textarea:focus {
    box-shadow: inset 0 0 5px #85B7E9;
}
*.unselectable {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
}

<textarea id="textarea"></textarea>

Цю проблему можна вирішити за допомогою селектора, показаного заповнювачем, та супер накладених фонів, якщо ваша реалізація дозволяє:

textarea:not(:placeholder-shown) {
  background: #fff;
}

div {
  top: 0;
  left: 14px;
  color: rgba(0,0,0,0.4);
  z-index: -1;
  position: absolute;
  line-height: 1.2;
  white-space: pre-wrap;
}

https://codepen.io/franciscoaquino/pen/YzyBPYK

Підтримка селектора:

https://caniuse.com/#feat=css-placeholder-shown