AGGIORNAMENTO (gennaio 2016): il piccolo hack potrebbe non funzionare più su tutti i browser, quindi ho una nuova soluzione con un po 'di javascript di seguito.
Un bel piccolo hack
Non è piacevole, ma puoi semplicemente inserire le nuove righe nel codice HTML. Come questo:
<textarea rows="6" id="myAddress" type="text" placeholder="My Awesome House,
1 Long St
London
Postcode
UK"></textarea>
Si noti che ogni riga si trova su una nuova riga (non essere racchiusa) e ogni rientro della "scheda" è di 4 spazi. Concesso che non è un metodo molto carino, ma sembra funzionare:
http://jsfiddle.net/01taylop/HDfju/
- È probabile che il livello di rientro di ciascuna riga varierà in base alla larghezza dell'area di testo.
- È importante avere
resize: none;nel CSS in modo che la dimensione della textarea sia fissa (Vedi jsfiddle).
In alternativa,
quando vuoi una nuova linea, premi Invio due volte (Quindi c'è una linea vuota tra le tue "nuove linee". Questa "linea vuota" creata deve avere schede / spazi sufficienti che corrispondano alla larghezza della tua area di testo. non importa se ne hai troppi, ne hai solo bisogno. È così sporco, ma probabilmente non conforme al browser. Vorrei che ci fosse un modo più semplice!
Una soluzione migliore
Dai un'occhiata al JSFiddle .
- Questa soluzione posiziona un div dietro la textarea.
- Alcuni javascript vengono utilizzati per modificare il colore di sfondo dell'area di testo, nascondendo o rivelando il segnaposto in modo appropriato.
- Gli input e i segnaposto devono avere le stesse dimensioni dei caratteri, quindi i due mixin.
- Le proprietà
box-sizinge display: blocknell'area di testo sono importanti o il div dietro non avrà le stesse dimensioni.
- Anche l'impostazione
resize: verticale a min-heightnell'area di testo sono importanti: nota come il testo segnaposto verrà spostato e l'espansione dell'area di testo manterrà lo sfondo bianco. Tuttavia, commentare la resizeproprietà causerà problemi durante l'espansione orizzontale dell'area di testo.
- Assicurati solo che l'altezza minima nell'area di testo sia sufficiente per coprire l'intero segnaposto alla sua larghezza minima. **
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"?>come nuova riga