Я пробовал несколько подходов, но никто не работал. Кто-нибудь знает отличный способ обойти это?
<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 entity внутри атрибута placeholder:
<textarea name="foo" placeholder="hello you Second line Third line"></textarea>
Работает: Chrome 62, IE10
Не работает: Firefox 57, Safari 11
Не думайте, что вам разрешено это сделать: http://www.w3.org/TR/html5/forms.html#the-placeholder-attribute
Соответствующий контент (акцент мой):
Атрибут placeholder представляет собой короткий намек (слово или короткое фраза), предназначенная для помощи пользователю при вводе данных, когда элемент управления имеет неважно. Подсказка может быть примерной или краткой характеристикой ожидаемый формат. Атрибут, если он указан, должен иметь значение, которое не содержит U + 000A LINE FEED (LF) или U + 000D CARRIAGE RETURN (CR) символов.
ОБНОВЛЕНИЕ (январь 2016 г.): Хороший маленький взлом может не работать во всех браузерах, поэтому у меня есть новое решение с небольшим количеством javascript ниже.
Это не очень приятно, но вы можете просто поместить новые строки в html. Вот так:
<textarea rows="6" id="myAddress" type="text" placeholder="My Awesome House,
1 Long St
London
Postcode
UK"></textarea>
Обратите внимание, что каждая строка находится на новой строке (не обертывается), и каждый отступ "tab" имеет 4 пробела. Конечно, это не очень хороший метод, но он работает:
http://jsfiddle.net/01taylop/HDfju/
resize: none; в css, чтобы размер текстового поля был фиксированным (см. jsfiddle).В качестве альтернативы Если вы хотите создать новую строку, дважды нажмите "Возврат" (так что между вашими "новыми строками" есть пустая строка. Созданная "пустая строка" должна иметь достаточно вкладок/пробелов, которые бы соответствовали ширине вашего текстового поля. t, похоже, имеет значение, если у вас слишком много, вам просто нужно достаточно. Это настолько грязно, хотя и, возможно, не совместимо с браузером. Хотелось бы, чтобы был более простой способ!
Посмотрите JSFiddle.
box-sizing и display: block в текстовом поле важны, или div позади него не будет того же размера.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 Enter Choice#2 Enter Choice#3"></textarea>
Я тестировал это на Windows 10.0 (Build 10240) и версию Google Chrome 47.0.2526.80 м
08:43:08 АСТ 6 Раби Аль-Аввал, 1437 четверг, 17 декабря 2015 года
Спасибо
Нет, вы не можете сделать это в атрибуте placeholder. Вы не можете даже html кодировать новые строки, такие как в placeholder.
Небольшая демонстрация:
Вы не можете сделать это с чистым HTML, но этот плагин jQuery позволит вам: https://github.com/bradjasper/jQuery-Placeholder-Newlines
Попробуйте следующее:
<textarea
placeholder="Line1
			Line2"
cols="10"
rows="5"
style="resize:none">
</textarea>
Немного улучшенная версия ответа Джейсона Геннаро (см. комментарии к коду):
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>
Используйте вместо /n, это изменит строку.
Я изменил скрипт @Richard Bronosky как это.
Лучше подходит для использования атрибута data-*, а не для настраиваемого атрибута.
Я заменил <textarea placeholdernl> на <textarea data-placeholder> и некоторые другие стили.
отредактированный
Вот исходный ответ Richard , который содержит полный фрагмент кода.
<textarea data-placeholder="1111\n2222"></textarea>
$('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
Установка его в pre-line решила проблему для меня.
textarea {
white-space: pre-line;
}<textarea placeholder='This is a line
should this be a new line'></textarea>очень просто
var position = your break position;
var breakLine = " ";//in html
var output = [value.slice(0, position), breakLine, value.slice(position)].join('');
return output;
значение представляет исходную строку
Проверьте это решение с помощью пользовательского заполнителя.
$(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>Добавьте только & # 10 для разрыва строки, не нужно писать ни CSS, ни JavaScript.
textarea{
width:300px;
height:100px;
}<textarea placeholder='This is a line this 
should be a new line'></textarea>
<textarea placeholder=' This is a line
should this be a new line?'></textarea>Мне не нравится скрывать местозаполнитель, когда вы фокусируете текстовое поле. Поэтому я создал конструкторную функцию Placeholder, которая выглядит точно так же, как встроенный заполнитель, и работает также в других браузерах, чем Google Chrome. Это очень удобно, потому что вы можете использовать функцию Placeholder так часто, как хотите, и ей даже не нужен jQuery.
EDIT:
Теперь он также обрабатывает специальные случаи, например, правильно вставляя заполнитель.
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>Старый вопрос, я знаю, но просто подумал, что опубликую простое решение, с которым я столкнулся. Он определенно чувствует себя взломанным, и он работает только в том случае, если у вас есть текстовая область с фиксированной шириной или вы не возражаете против того, как она выглядит при растяжении, но вы можете добавить пробелы внутри заполнителя. Если вы добавите достаточно, он, естественно, сломается.
Основываясь на решении для водяных знаков, предложенном Патриком (ищите "Лучшее решение"), я создал небольшую библиотеку Angular для поддержки мультистрок в заполнителе: https://www.npmjs.com/package/ng-multiline-placeholder
Просто на случай, если это пригодится...