AKTUALIZACJA (styczeń 2016 r.): Miły mały hack może już nie działać we wszystkich przeglądarkach, więc mam nowe rozwiązanie z niewielkim fragmentem JavaScript poniżej.
Niezły mały hack
To nie jest przyjemne, ale możesz po prostu umieścić nowe wiersze w html. Lubię to:
<textarea rows="6" id="myAddress" type="text" placeholder="My Awesome House,
1 Long St
London
Postcode
UK"></textarea>
Zwróć uwagę, że każda linia znajduje się w nowej linii (nie jest zawijana), a każde wcięcie tabulatora ma 4 spacje. To prawda, nie jest to zbyt fajna metoda, ale wydaje się, że działa:
http://jsfiddle.net/01taylop/HDfju/
- Prawdopodobnie poziom wcięcia każdego wiersza będzie się różnił w zależności od szerokości obszaru tekstowego.
- Ważne jest, aby mieć
resize: none;w css, aby rozmiar obszaru tekstowego był stały (patrz jsfiddle).
Alternatywnie,
jeśli chcesz nową linię, naciśnij dwukrotnie klawisz Return (więc między twoimi „nowymi liniami” jest pusta linia. Utworzona „pusta linia” musi mieć wystarczającą liczbę tabulatorów / spacji, które odpowiadałyby szerokości obszaru tekstowego. Nie Wydaje się, że nie ma to znaczenia, jeśli masz zbyt wiele, po prostu potrzebujesz wystarczająco dużo. Jest to jednak tak brudne i prawdopodobnie nie jest zgodne z przeglądarkami. Chciałbym, aby był łatwiejszy sposób!
Lepsze rozwiązanie
Sprawdź JSFiddle .
- To rozwiązanie umieszcza element div za obszarem tekstowym.
- Niektóre javascript są używane do zmiany koloru tła obszaru tekstu, odpowiedniego ukrycia lub ujawnienia symbolu zastępczego.
- Dane wejściowe i symbole zastępcze muszą mieć te same rozmiary czcionek, stąd te dwie mieszanki.
- Właściwości
box-sizingi display: blockw obszarze tekstowym są ważne lub znajdujący się za nimi element div nie będzie tego samego rozmiaru.
- Ważne są również ustawienia
resize: verticali a min-heightna obszarze tekstu - zwróć uwagę, jak tekst zastępczy zostanie zawinięty, a rozszerzenie obszaru tekstu zachowa białe tło. Jednak komentowanie resizewłaściwości spowoduje problemy podczas poziomego rozszerzania obszaru tekstu.
- Po prostu upewnij się, że minimalna wysokość obszaru tekstowego jest wystarczająca, aby zakryć cały symbol zastępczy przy jego najmniejszej szerokości. **
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"?>jako nową linię