GÜNCELLEME (Oca 2016): Güzel küçük kesmek artık tüm tarayıcılarda çalışmayabilir, bu yüzden aşağıda küçük bir javascript ile yeni bir çözümüm var.
Güzel Bir Küçük Hack
Hoş gelmiyor, ancak yeni satırları html'ye koyabilirsiniz. Bunun gibi:
<textarea rows="6" id="myAddress" type="text" placeholder="My Awesome House,
1 Long St
London
Postcode
UK"></textarea>
Her satırın yeni bir satırda (kaydırılmamış) ve her 'sekme' girintisinin 4 boşluk olduğuna dikkat edin. Verilen çok güzel bir yöntem değil, ama işe yarıyor gibi görünüyor:
http://jsfiddle.net/01taylop/HDfju/
- Her satırın girinti düzeyinin, metin alanınızın genişliğine bağlı olarak değişmesi muhtemeldir.
resize: none;Css'de bulunması önemlidir, böylece metin alanının boyutu sabittir (Bkz. Jsfiddle).
Alternatif olarak
Yeni bir satır istediğinizde, iki kez geri dön düğmesine basın (Yani 'yeni satırlarınız' arasında boş bir satır var. Oluşturulan bu 'boş satırın', metin alanınızın genişliğine denk gelecek yeterli sekme / boşluk içermesi gerekir. Çok fazla şeyiniz varsa önemli değil, sadece yeterince ihtiyacınız var.Bu çok kirli ama muhtemelen tarayıcı uyumlu değil. Keşke daha kolay bir yol olsaydı!
Daha İyi Bir Çözüm
JSFiddle'a göz atın .
- Bu çözüm, metin alanının arkasında bir div konumlandırır.
- Bazı javascript, metin alanının arka plan rengini değiştirmek, yer tutucuyu uygun şekilde gizlemek veya göstermek için kullanılır.
- Girişler ve yer tutucular aynı yazı tipi boyutlarına sahip olmalı, dolayısıyla iki karışım olmalıdır.
box-sizingVe display: blocktextarea üzerinde özellikleri önemlidir veya arkasında div aynı boyutta olmayacaktır.- Ayarlama
resize: verticalve min-heightmetin alanı üzerindeki a da önemlidir - yer tutucu metnin nasıl sarılacağını ve metin alanını genişletmenin beyaz arka planı koruyacağını unutmayın. Ancak, resizeözelliği yorumlamak , metin alanını yatay olarak genişletirken sorunlara neden olur.
- Sadece metin alanının minimum yüksekliğinin tüm yer tutucunuzu en küçük genişliğinde kapsayacak şekilde yeterli olduğundan emin olun. **
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"?>yeni bir satır olarak koyabilirsiniz