MISE À JOUR (janvier 2016): Le joli petit hack pourrait ne plus fonctionner sur tous les navigateurs, j'ai donc une nouvelle solution avec un tout petit peu de javascript ci-dessous.
Un joli petit hack
Cela ne fait pas du bien, mais vous pouvez simplement mettre les nouvelles lignes dans le html. Comme ça:
<textarea rows="6" id="myAddress" type="text" placeholder="My Awesome House,
1 Long St
London
Postcode
UK"></textarea>
Notez que chaque ligne est sur une nouvelle ligne (non encapsulée) et chaque retrait de «tabulation» est de 4 espaces. Certes, ce n'est pas une très bonne méthode, mais cela semble fonctionner:
http://jsfiddle.net/01taylop/HDfju/
- Il est probable que le niveau de retrait de chaque ligne varie en fonction de la largeur de votre zone de texte.
- Il est important d'avoir
resize: none;dans le css pour que la taille de la zone de texte soit fixe (voir jsfiddle).
Alternativement,
lorsque vous voulez une nouvelle ligne, appuyez deux fois sur retour (il y a donc une ligne vide entre vos 'nouvelles lignes'. Cette 'ligne vide' créée doit avoir suffisamment de tabulations / espaces correspondant à la largeur de votre zone de texte. Il semble que peu importe si vous en avez beaucoup trop, vous en avez juste besoin. C'est tellement sale et probablement pas compatible avec le navigateur. J'aurais aimé qu'il y ait un moyen plus simple!
Une meilleure solution
Découvrez le JSFiddle .
- Cette solution place un div derrière la zone de texte.
- Certains javascript sont utilisés pour modifier la couleur d'arrière-plan de la zone de texte, masquant ou révélant l'espace réservé de manière appropriée.
- Les entrées et les espaces réservés doivent avoir les mêmes tailles de police, d'où les deux mixins.
- Les propriétés
box-sizinget display: blockde la zone de texte sont importantes ou le div derrière celui-ci ne sera pas de la même taille.
- Le réglage
resize: verticalet un min-heightsur la zone de texte sont également importants - notez comment le texte de l'espace réservé sera enveloppé et l'agrandissement de la zone de texte conservera l'arrière-plan blanc. Cependant, commenter la resizepropriété entraînera des problèmes lors de l'expansion horizontale de la zone de texte.
- Assurez-vous simplement que la hauteur minimale de la zone de texte est suffisante pour couvrir l'intégralité de votre espace réservé à sa plus petite largeur. **
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"?>une nouvelle ligne