ATUALIZAÇÃO (jan de 2016): O belo e pequeno hack pode não funcionar mais em todos os navegadores, por isso tenho uma nova solução com um pouquinho de javascript abaixo.
Um bom pequeno corte
Não parece bom, mas você pode simplesmente colocar as novas linhas no html. Como isso:
<textarea rows="6" id="myAddress" type="text" placeholder="My Awesome House,
1 Long St
London
Postcode
UK"></textarea>
Observe que cada linha está em uma nova linha (não está sendo quebrada) e cada recuo da 'tab' tem 4 espaços. Concedido que não é um método muito bom, mas parece funcionar:
http://jsfiddle.net/01taylop/HDfju/
- É provável que o nível de recuo de cada linha varie dependendo da largura da sua área de texto.
- É importante ter
resize: none;no css para que o tamanho da área de texto seja fixo (consulte jsfiddle).
Como alternativa
Quando você deseja uma nova linha, pressione Enter duas vezes (para que haja uma linha vazia entre suas 'novas linhas'. Essa 'linha vazia' criada precisa ter guias / espaços suficientes que equivaleriam à largura da área de texto. Parece que não importa se você tem muitos, você só precisa o suficiente. Isso é tão sujo e provavelmente não é compatível com o navegador. Gostaria que houvesse uma maneira mais fácil!
Uma solução melhor
Confira o JSFiddle .
- Esta solução posiciona uma div atrás da área de texto.
- Algum javascript é usado para alterar a cor do plano de fundo da área de texto, ocultando ou revelando o espaço reservado apropriadamente.
- As entradas e espaços reservados devem ter os mesmos tamanhos de fonte, portanto, os dois mixins.
- As propriedades
box-sizinge display: blockna área de texto são importantes ou a div por trás dela não será do mesmo tamanho.
- A configuração
resize: verticale min-heighta área de texto também são importantes - observe como o texto do espaço reservado será agrupado e a expansão da área de texto manterá o plano de fundo branco. No entanto, comentar a resizepropriedade causará problemas ao expandir a área de texto horizontalmente.
- Apenas verifique se a altura mínima na área de texto é suficiente para cobrir todo o espaço reservado na menor largura. **
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"?>como uma nova linha