UPDATE (Jan 2016): Der nette kleine Hack funktioniert möglicherweise nicht mehr in allen Browsern, daher habe ich unten eine neue Lösung mit ein wenig Javascript.
Ein schöner kleiner Hack
Es fühlt sich nicht gut an, aber Sie können einfach die neuen Zeilen in den HTML-Code einfügen. So was:
<textarea rows="6" id="myAddress" type="text" placeholder="My Awesome House,
1 Long St
London
Postcode
UK"></textarea>
Beachten Sie, dass sich jede Zeile in einer neuen Zeile befindet (nicht umbrochen wird) und jeder Tabulator-Einzug 4 Leerzeichen enthält. Zugegeben, es ist keine sehr schöne Methode, aber es scheint zu funktionieren:
http://jsfiddle.net/01taylop/HDfju/
- Es ist wahrscheinlich, dass die Einrückungsstufe jeder Zeile abhängig von der Breite Ihres Textbereichs variiert.
- Es ist wichtig,
resize: none;in der CSS zu haben, damit die Größe des Textbereichs festgelegt ist (siehe jsfiddle).
Alternativ
Wenn Sie eine neue Linie wollen, drücken die Eingabetaste zweimal (So gibt es eine leere Zeile zwischen ‚neuen Linien‘. Diese ‚leere Zeile‘ erstellt Bedürfnisse genug tabs / Räume aufweisen, die der Breite des Textbereich entsprechen würde. Es spielt keine Es scheint nicht wichtig zu sein, wenn Sie viel zu viele haben, Sie brauchen nur genug. Dies ist jedoch so schmutzig und wahrscheinlich nicht browserkonform. Ich wünschte, es gäbe einen einfacheren Weg!
Eine bessere Lösung
Schauen Sie sich die JSFiddle an .
- Diese Lösung positioniert ein Div hinter dem Textbereich.
- Etwas Javascript wird verwendet, um die Hintergrundfarbe des Textbereichs zu ändern und den Platzhalter entsprechend auszublenden oder freizulegen.
- Die Eingaben und Platzhalter müssen die gleichen Schriftgrößen haben, daher die beiden Mixins.
- Die
box-sizingund display: block-Eigenschaften im Textbereich sind wichtig, oder das dahinterliegende Div ist nicht gleich groß.
- Die Einstellung
resize: verticalund ein min-heightZeichen im Textbereich sind ebenfalls wichtig. Beachten Sie, wie der Platzhaltertext umbrochen wird und das Erweitern des Textbereichs den weißen Hintergrund beibehält. Das Auskommentieren der resizeEigenschaft führt jedoch zu Problemen beim horizontalen Erweitern des Textbereichs.
- Stellen Sie einfach sicher, dass die Mindesthöhe auf dem Textbereich ausreicht, um Ihren gesamten Platzhalter in seiner kleinsten Breite abzudecken. **
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"?>als neue Zeile setzen