ОБНОВЛЕНИЕ (январь 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).
В качестве альтернативы,
если вы хотите новую строку, дважды нажмите return (чтобы между вашими «новыми строками» была пустая строка. Для создания этой «пустой строки» должно быть достаточно табуляции / пробелов, которые бы равнялись ширине текстовой области. Кажется, не имеет значения, если у вас слишком много, вам просто нужно достаточно. Это настолько грязно и, вероятно, не совместимо с браузером. Хотелось бы, чтобы был более легкий путь!
Лучшее решение
Проверьте JSFiddle .
- Это решение размещает div за текстовой областью.
- Некоторый javascript используется для изменения цвета фона текстовой области, скрывая или раскрывая заполнитель соответствующим образом.
- Входные данные и заполнители должны иметь одинаковый размер шрифта, следовательно, два миксина.
box-sizingиdisplay: block свойства на текстовое поле являются важными или ДИВ за ним не будет иметь тот же размер.- Установка
resize: verticalи a 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');
}
});
<?="\n"?>как новую строку